@comicrelief/component-library 8.44.2 → 8.44.4

package/src/components/Atoms/Text/Text.js

@@ -19,19 +19,19 @@ export const BaseText = styled.span`
       // all tags will use the new standardised styles set in fontHelper), but, in order to ensure
       // things don't break/look bad accidentally, it'll require intentional, in-situ prop removal.
 
-      ${({ size }) => (size && `font-size: ${theme.fontSize(size)}`)};
-      ${({ size }) => (size && 'line-height: normal')};
+      ${({ $size }) => ($size && `font-size: ${theme.fontSize($size)}`)};
+      ${({ $size }) => ($size && 'line-height: normal')};
 
-      ${({ family }) => (family && `font-family: ${theme.fontFamilies(family)}`)};
-      ${({ weight }) => (weight && `font-weight: ${weight}`)};
-      ${({ height }) => (height && `line-height: ${height}`)};
-      ${({ uppercase }) => (uppercase && 'text-transform: uppercase')};
+      ${({ $family }) => ($family && `font-family: ${theme.fontFamilies($family)}`)};
+      ${({ $weight }) => ($weight && `font-weight: ${$weight}`)};
+      ${({ $height }) => ($height && `line-height: ${$height}`)};
+      ${({ $uppercase }) => ($uppercase && 'text-transform: uppercase')};
 
-      color: ${({ color }) => (color ? theme.color(color) : 'inherit')};
+      color: ${({ $color }) => ($color ? theme.color($color) : 'inherit')};
 
-      ${({ textAlign }) => textAlign && `text-align: ${textAlign}`};
+      ${({ $textAlign }) => $textAlign && `text-align: ${$textAlign}`};
 
-      ${({ size }) => (size === 'super' && css`
+      ${({ $size }) => ($size === 'super' && css`
         font-size: ${theme.fontSize('xxl')};
         line-height: 3rem;
 
@@ -48,11 +48,17 @@ export const BaseText = styled.span`
         }
       `)};
 
-      ${({ mobileColor }) => mobileColor && css`
+      ${({ $mobileColor }) => $mobileColor && css`
         @media (max-width: ${breakpointValues2026.L - 1}px) {
-          color: ${theme.color(mobileColor)};
+          color: ${theme.color($mobileColor)};
         }
       `};
+      
+      // Ensure any *nested* content doesn't 
+      span {
+        font-size: inherit;
+        line-height: inherit;
+      }
     }
   `)};
 `;
@@ -76,14 +82,14 @@ const Text = ({
   <BaseText
     {...rest}
     as={tag}
-    color={color}
-    size={size}
-    uppercase={uppercase}
-    height={height}
-    weight={weight}
-    family={family}
-    mobileColor={mobileColor}
-    textAlign={textAlign}
+    $color={color}
+    $size={size}
+    $uppercase={uppercase}
+    $height={height}
+    $weight={weight}
+    $family={family}
+    $mobileColor={mobileColor}
+    $textAlign={textAlign}
   >
     {children}
   </BaseText>

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"}}>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"}}>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"}}>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"}}>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">
-    <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 tag="p" style={{ marginTop: "55px", fontStyle: "italic"}}>
-      Tags to be phased out:
-    </Text>
 
-    <Text 
+  <Text tag="p" size="m" style={{ marginTop: "2rem"}} height="100px" weight="500">
+    <span style={{ width: "55px"}}>P (body)</span>
+  </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="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"}}>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"}}>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;
@@ -33,7 +38,6 @@ exports[`renders heavy heading correctly 1`] = `
 
 <h3
   className="c0"
-  color="inherit"
 >
   Heading 3 heavy
 </h3>
@@ -56,6 +60,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;
@@ -72,8 +81,6 @@ exports[`renders high heading correctly 1`] = `
 
 <h3
   className="c0"
-  color="inherit"
-  height="5"
 >
   Heading 3 high
 </h3>
@@ -97,6 +104,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;
@@ -113,8 +125,6 @@ exports[`renders large heading correctly 1`] = `
 
 <h3
   className="c0"
-  color="inherit"
-  size="l"
 >
   Heading 3 large
 </h3>
@@ -139,6 +149,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;
@@ -155,8 +170,6 @@ exports[`renders xl paragraph with Anton font correctly 1`] = `
 
 <p
   className="c0"
-  color="inherit"
-  size="xl"
 >
   My paragraph xl and font Anton
 </p>
@@ -181,6 +194,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;
@@ -197,8 +215,6 @@ exports[`renders xl yellow paragraph correctly 1`] = `
 
 <p
   className="c0"
-  color="yellow"
-  size="xl"
 >
   My paragraph xl and yellow
 </p>

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;
@@ -127,7 +132,6 @@ it('renders correctly', () => {
     >
       <span
         className="c1 c2"
-        color="inherit"
         dangerouslySetInnerHTML={
           Object {
             "__html": "Label",

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;
@@ -135,7 +140,6 @@ exports[`renders correctly with no value and no options 1`] = `
   >
     <span
       className="c2 c3"
-      color="inherit"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Search for bikes",
@@ -182,6 +186,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;
@@ -304,7 +313,6 @@ exports[`renders correctly with value and no options 1`] = `
   >
     <span
       className="c2 c3"
-      color="inherit"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Search for bikes",
@@ -351,6 +359,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;
@@ -512,7 +525,6 @@ exports[`renders correctly with value and options 1`] = `
   >
     <span
       className="c2 c3"
-      color="inherit"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Search for bikes",
@@ -562,7 +574,6 @@ exports[`renders correctly with value and options 1`] = `
       >
         <span
           className="c2"
-          color="inherit"
         >
           Canyon
         </span>
@@ -578,7 +589,6 @@ exports[`renders correctly with value and options 1`] = `
       >
         <span
           className="c2"
-          color="inherit"
         >
           Cannondale
         </span>
@@ -594,7 +604,6 @@ exports[`renders correctly with value and options 1`] = `
       >
         <span
           className="c2"
-          color="inherit"
         >
           Condor
         </span>
@@ -610,7 +619,6 @@ exports[`renders correctly with value and options 1`] = `
       >
         <span
           className="c2"
-          color="inherit"
         >
           Cube
         </span>

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;
@@ -35,6 +40,11 @@ exports[`renders correctly 1`] = `
   line-height: normal;
 }
 
+.c6 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c4 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
@@ -165,8 +175,6 @@ exports[`renders correctly 1`] = `
   >
     <h2
       className="c2"
-      color="inherit"
-      size="l"
     >
       I am the title
     </h2>
@@ -193,8 +201,6 @@ 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%;
@@ -284,16 +294,11 @@ it('renders article teaser correctly', () => {
         >
           <span
             className="c8 c9"
-            color="inherit"
-            size="xs"
           >
              01 July 2019
           </span>
           <h3
             className="c10 c11"
-            color="inherit"
-            height="2rem"
-            size="xl"
           >
             News article
           </h3>
@@ -334,6 +339,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 +365,11 @@ it('renders press realese correctly', () => {
       text-transform: uppercase;
     }
 
+    .c10 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c4 {
       display: block;
       width: 80px;
@@ -556,16 +571,11 @@ it('renders press realese correctly', () => {
         >
           <span
             className="c8 c9"
-            color="inherit"
-            size="xs"
           >
              01 July 2019
           </span>
           <h3
             className="c10 c11"
-            color="inherit"
-            height="2rem"
-            size="xl"
           >
             Press Release
           </h3>

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

@@ -19,6 +19,11 @@ exports[`renders correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c0 {
   background: #48276E;
 }
@@ -64,8 +69,6 @@ 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>