@comicrelief/component-library 8.44.1 → 8.44.3

package/src/components/Atoms/Text/Text.md

@@ -8,32 +8,32 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     // To be phased out: tags to use the prescribed family always
     family="Anton"
   >
-    <b style={{ width: "55px", display: "inline-block" }}>H1 </b>
-    <Text style={{ textTransform: "none" }} tag="span" size="s">
-      <b>family:</b> {fontConfig['h1'].family} -  
-      <b>mobileColor:</b> blue
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h1'].small.fontSize} / {fontConfig['h1'].medium.fontSize} / {fontConfig['h1'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h1'].small.lineHeight} / {fontConfig['h1'].medium.lineHeight} / {fontConfig['h1'].large.lineHeight}
-      
-    </Text>
+    <span style={{ width: "55px", display: "inline-block" }}>H1 </span>
   </Text>
-  
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h1'].family} -  
+    <b>mobileColor:</b> blue
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h1'].small.fontSize} / {fontConfig['h1'].medium.fontSize} / {fontConfig['h1'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h1'].small.lineHeight} / {fontConfig['h1'].medium.lineHeight} / {fontConfig['h1'].large.lineHeight}
+  </Text>
+
+
   <Text
     tag="h2"
     mobileColor="green"
     family="Anton"
   >
-    <b style={{ width: "55px", display: "inline-block" }}>H2 </b>
-    <Text style={{ textTransform: "none" }} tag="span" size="s">
-      <b>family:</b> {fontConfig['h2'].family} - 
-      <b>mobileColor:</b> green
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h2'].small.fontSize} / {fontConfig['h2'].medium.fontSize} / {fontConfig['h2'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h2'].small.lineHeight} / {fontConfig['h2'].medium.lineHeight} / {fontConfig['h2'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px", display: "inline-block" }}>H2 </span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h2'].family} - 
+    <b>mobileColor:</b> green
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h2'].small.fontSize} / {fontConfig['h2'].medium.fontSize} / {fontConfig['h2'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h2'].small.lineHeight} / {fontConfig['h2'].medium.lineHeight} / {fontConfig['h2'].large.lineHeight} 
   </Text>
 
   <Text
@@ -41,15 +41,15 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     mobileColor="red"
     family="Montserrat"
   >
-    <b style={{ width: "55px", display: "inline-block" }}>H3 </b>
-    <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['h3'].family} -  
-      <b>mobileColor:</b> red
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h3'].small.fontSize} / {fontConfig['h3'].medium.fontSize} / {fontConfig['h3'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h3'].small.lineHeight} / {fontConfig['h3'].medium.lineHeight} / {fontConfig['h3'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px", display: "inline-block" }}>H3 </span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h3'].family} -  
+    <b>mobileColor:</b> red
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h3'].small.fontSize} / {fontConfig['h3'].medium.fontSize} / {fontConfig['h3'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h3'].small.lineHeight} / {fontConfig['h3'].medium.lineHeight} / {fontConfig['h3'].large.lineHeight} 
   </Text>
 
   <Text
@@ -58,61 +58,62 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     weight="normal"
     // To be phased out: text to always be rendered as typed
     uppercase>
-    <b style={{ width: "55px", display: "inline-block" }}>H4 </b>
-    <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['span'].family} -  
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h4'].small.fontSize} / {fontConfig['h4'].medium.fontSize} / {fontConfig['h4'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h4'].small.lineHeight} / {fontConfig['h4'].medium.lineHeight} / {fontConfig['h4'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px", display: "inline-block" }}>H4 </span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['span'].family} -  
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h4'].small.fontSize} / {fontConfig['h4'].medium.fontSize} / {fontConfig['h4'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h4'].small.lineHeight} / {fontConfig['h4'].medium.lineHeight} / {fontConfig['h4'].large.lineHeight} 
   </Text>
 
-  <Text tag="p" size="m">
+
+
+  <Text tag="p" size="m" style={{ marginTop: "2rem"}}>
     <span style={{ width: "55px", display: "inline-block" }}>Body</span>
-      <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['p'].family} -  
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['p'].small.fontSize} / {fontConfig['p'].medium.fontSize} / {fontConfig['p'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['p'].small.lineHeight} / {fontConfig['p'].medium.lineHeight} / {fontConfig['p'].large.lineHeight} 
-      </Text>
-    </Text>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['p'].family} -  
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['p'].small.fontSize} / {fontConfig['p'].medium.fontSize} / {fontConfig['p'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['p'].small.lineHeight} / {fontConfig['p'].medium.lineHeight} / {fontConfig['p'].large.lineHeight} 
+  </Text>
 
-    <Text tag="p" style={{ marginTop: "55px", fontStyle: "italic"}}>
-      Tags to be phased out:
-    </Text>
+  <Text tag="p" style={{ marginTop: "55px", fontStyle: "italic"}}>
+    Tags to be phased out:
+  </Text>
 
-    <Text 
+  <Text 
     tag="h5"
     family="Anton"
     uppercase
     // To be phased-out
     weight="normal">
-    <b style={{ width: "55px", display: "inline-block" }}>H5 </b>
-    <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['h5'].family} -  
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h5'].small.fontSize} / {fontConfig['h5'].medium.fontSize} / {fontConfig['h5'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h5'].small.lineHeight} / {fontConfig['h5'].medium.lineHeight} / {fontConfig['h5'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px", display: "inline-block" }}>H5 </span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h5'].family} -  
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h5'].small.fontSize} / {fontConfig['h5'].medium.fontSize} / {fontConfig['h5'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h5'].small.lineHeight} / {fontConfig['h5'].medium.lineHeight} / {fontConfig['h5'].large.lineHeight} 
   </Text>
-  
 
   <Text tag="h6" 
     family="Anton" 
     uppercase
     weight="normal">
-    <b style={{ width: "55px", display: "inline-block" }}>H6</b>
-    <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['h6'].family}
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h6'].small.fontSize} / {fontConfig['h6'].medium.fontSize} / {fontConfig['h6'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h6'].small.lineHeight} / {fontConfig['h6'].medium.lineHeight} / {fontConfig['h6'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px", display: "inline-block" }}>H6</span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h6'].family}
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h6'].small.fontSize} / {fontConfig['h6'].medium.fontSize} / {fontConfig['h6'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h6'].small.lineHeight} / {fontConfig['h6'].medium.lineHeight} / {fontConfig['h6'].large.lineHeight} 
   </Text>
-  
+
 </div>
 ```

package/src/components/Atoms/Text/__snapshots__/Text.test.js.snap

@@ -17,6 +17,11 @@ exports[`renders heavy heading correctly 1`] = `
   font-weight: 1000;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1.25rem;
@@ -56,6 +61,11 @@ exports[`renders high heading correctly 1`] = `
   line-height: 5;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1.25rem;
@@ -97,6 +107,11 @@ exports[`renders large heading correctly 1`] = `
   line-height: normal;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1.25rem;
@@ -139,6 +154,11 @@ exports[`renders xl paragraph with Anton font correctly 1`] = `
   font-family: 'Anton',Impact,sans-serif;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1rem;
@@ -181,6 +201,11 @@ exports[`renders xl yellow paragraph correctly 1`] = `
   color: #FFE400;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1rem;

package/src/components/Atoms/TextArea/TextArea.test.js

@@ -28,6 +28,11 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
+    .c1 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       width: 100%;
       position: relative;

package/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap

@@ -13,6 +13,11 @@ exports[`renders correctly with no value and no options 1`] = `
   line-height: 1.25rem;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   width: 100%;
   position: relative;
@@ -182,6 +187,11 @@ exports[`renders correctly with value and no options 1`] = `
   line-height: 1.25rem;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   width: 100%;
   position: relative;
@@ -351,6 +361,11 @@ exports[`renders correctly with value and options 1`] = `
   line-height: 1.25rem;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   width: 100%;
   position: relative;

package/src/components/Molecules/Accordion/Accordion.md

@@ -10,7 +10,7 @@ import Text from '../../Atoms/Text/Text';
     </Text>
   }
   >
- <Text tag="p">Name, surname, email and billing address We need these to process your payment, create a receipt and send it to you. Establishment information We use this information to understand which institutions (e.g. schools, companies) raise money for us. Your details will be kept safe and never shared with other organisations; see our Privacy Policy for more information</Text>
+ <Text tag="p" size="s">Name, surname, email and billing address We need these to process your payment, create a receipt and send it to you. Establishment information We use this information to understand which institutions (e.g. schools, companies) raise money for us. Your details will be kept safe and never shared with other organisations; see our Privacy Policy for more information</Text>
 </Accordion>
 ```
 
@@ -26,9 +26,9 @@ import Text from '../../Atoms/Text/Text';
   }
   >
   
-  <Text tag="p">Customised bottom padding here!</Text>
+  <Text tag="p" size="s">Customised bottom padding here!</Text>
   
-  <Text tag="p">
+  <Text tag="p" size="s">
     <a href="https://www.google.com">A plain anchor link, made to resemble a Link component</a>.
   </Text>
 </Accordion>

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

@@ -13,7 +13,7 @@ it('renders correctly', () => {
         </Text>
       )}
     >
-      <Text tag="p">Name, surname, email and billing address We need these to process your payment, create a receipt and send it to you. Establishment information We use this information to understand which institutions (e.g. schools, companies) raise money for us. Your details will be kept safe and never shared with other organisations; see our Privacy Policy for more information</Text>
+      <Text tag="p" size="s">Name, surname, email and billing address We need these to process your payment, create a receipt and send it to you. Establishment information We use this information to understand which institutions (e.g. schools, companies) raise money for us. Your details will be kept safe and never shared with other organisations; see our Privacy Policy for more information</Text>
     </Accordion>
   ).toJSON();
 

package/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap

@@ -18,6 +18,11 @@ exports[`renders correctly 1`] = `
   line-height: normal;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c6 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -30,6 +35,16 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
+.c6 {
+  font-size: 1rem;
+  line-height: normal;
+}
+
+.c6 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c4 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
@@ -189,6 +204,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c6"
       color="inherit"
+      size="s"
     >
       Name, surname, email and billing address We need these to process your payment, create a receipt and send it to you. Establishment information We use this information to understand which institutions (e.g. schools, companies) raise money for us. Your details will be kept safe and never shared with other organisations; see our Privacy Policy for more information
     </p>

package/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -37,6 +37,11 @@ it('renders article teaser correctly', () => {
       font-weight: bold;
     }
 
+    .c8 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c10 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 700;
@@ -58,6 +63,11 @@ it('renders article teaser correctly', () => {
       text-transform: uppercase;
     }
 
+    .c10 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c4 {
       display: block;
       width: 100%;
@@ -334,6 +344,11 @@ it('renders press realese correctly', () => {
       font-weight: bold;
     }
 
+    .c8 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c10 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 700;
@@ -355,6 +370,11 @@ it('renders press realese correctly', () => {
       text-transform: uppercase;
     }
 
+    .c10 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c4 {
       display: block;
       width: 80px;

package/src/components/Molecules/Banner/Banner.test.js

@@ -7,7 +7,7 @@ import Text from '../../Atoms/Text/Text';
 it('renders correctly', () => {
   const tree = renderWithTheme(
     <Banner backgroundColor="purple_dark">
-      <Text tag="p" color="white">
+      <Text tag="p" color="white" size="s">
         Mental health issues affect 1 in 4 of us in the UK.
         Join now and with your help we can provide vital support for people like Jordan.
         You know what to do.

package/src/components/Molecules/Banner/__snapshots__/Banner.test.js.snap

@@ -14,9 +14,16 @@ exports[`renders correctly 1`] = `
 }
 
 .c2 {
+  font-size: 1rem;
+  line-height: normal;
   color: #FFFFFF;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c0 {
   background: #48276E;
 }
@@ -63,6 +70,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c2"
       color="white"
+      size="s"
     >
       Mental health issues affect 1 in 4 of us in the UK. Join now and with your help we can provide vital support for people like Jordan. You know what to do.
     </p>

package/src/components/Molecules/Descriptor/Descriptor.test.js

@@ -44,6 +44,11 @@ it('renders article teaser correctly', () => {
       color: #222222;
     }
 
+    .c3 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c7 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 700;
@@ -65,6 +70,11 @@ it('renders article teaser correctly', () => {
       text-transform: uppercase;
     }
 
+    .c7 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c10 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 400;
@@ -85,6 +95,11 @@ it('renders article teaser correctly', () => {
       color: #222222;
     }
 
+    .c10 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       position: relative;
       width: 100%;

package/src/components/Molecules/InfoBanner/__snapshots__/InfoBanner.test.js.snap

@@ -19,6 +19,11 @@ exports[`renders correctly 1`] = `
   text-transform: uppercase;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c3 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -36,6 +41,11 @@ exports[`renders correctly 1`] = `
   line-height: normal;
 }
 
+.c3 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c4 {
   position: relative;
   display: inline;

package/src/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -35,6 +35,11 @@ it('renders correctly', () => {
       color: #FFFFFF;
     }
 
+    .c4 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c2 {
       display: block;
       width: 100%;

package/src/components/Molecules/Promo/Promo.test.js

@@ -25,7 +25,7 @@ it('renders Promo correctly', () => {
       >
         Curabitur pretium tincidunt lacus
       </Text>
-      <Text tag="p" color="white">
+      <Text tag="p" color="white" size="s">
         Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
         turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
       </Text>
@@ -60,7 +60,7 @@ it('renders Promo correctly end position', () => {
       >
         Curabitur pretium tincidunt lacus
       </Text>
-      <Text tag="p" color="white">
+      <Text tag="p" color="white" size="s">
         Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
         turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
       </Text>

package/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -24,6 +24,11 @@ exports[`renders Promo correctly 1`] = `
   line-height: 3rem;
 }
 
+.c7 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -37,9 +42,16 @@ exports[`renders Promo correctly 1`] = `
 }
 
 .c8 {
+  font-size: 1rem;
+  line-height: normal;
   color: #FFFFFF;
 }
 
+.c8 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c2 {
   display: block;
   width: 100%;
@@ -297,6 +309,7 @@ exports[`renders Promo correctly 1`] = `
         <p
           className="c8"
           color="white"
+          size="s"
         >
           Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
         </p>
@@ -341,6 +354,11 @@ exports[`renders Promo correctly end position 1`] = `
   line-height: 3rem;
 }
 
+.c7 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -354,9 +372,16 @@ exports[`renders Promo correctly end position 1`] = `
 }
 
 .c8 {
+  font-size: 1rem;
+  line-height: normal;
   color: #FFFFFF;
 }
 
+.c8 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c2 {
   display: block;
   width: 100%;
@@ -625,6 +650,7 @@ exports[`renders Promo correctly end position 1`] = `
         <p
           className="c8"
           color="white"
+          size="s"
         >
           Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
         </p>

package/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap

@@ -13,6 +13,11 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   width: 100%;
   position: relative;

package/src/components/Molecules/SearchInput/SearchInput.test.js

@@ -27,6 +27,11 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
+    .c6 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c4 {
       width: 100%;
       position: relative;