@comicrelief/component-library 8.44.1 → 8.44.3

package/dist/components/Atoms/Checkbox/Checkbox.js

@@ -91,7 +91,8 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     checkboxBorderChecked: checkboxBorderChecked,
     checkboxBorderFocus: checkboxBorderFocus
   })), /*#__PURE__*/_react.default.createElement("span", null), label ? /*#__PURE__*/_react.default.createElement(_Text.default, {
-    weight: "bold"
+    weight: "bold",
+    size: "s"
   }, label) : children);
 });
 Checkbox.propTypes = {

package/dist/components/Atoms/Checkbox/Checkbox.md

@@ -6,7 +6,7 @@ import Link from '../../Atoms/Link/Link';
 
 const LongLabel = () => (
   <div>
-    <Text tag="p">
+    <Text tag="p" size="s">
       I agree to the
       {' '}
       <Link target="blank" href="https://comicrelief.com/terms-of-use/">terms and conditions</Link>
@@ -15,7 +15,7 @@ const LongLabel = () => (
       {' '}
       <Link target="blank" href="https://comicrelief.com/privacy-notice/">privacy policy.</Link>
     </Text>
-    <Text tag="p">
+    <Text tag="p" size="s">
       For more information, please view our fundraising
       <Link target="blank" href="https://comicrelief.com/code-of-conduct/">code of conduct.</Link>
     </Text>

package/dist/components/Atoms/Checkbox/Checkbox.test.js

@@ -30,9 +30,16 @@ it('renders correctly', () => {
     }
 
     .c2 {
+      font-size: 1rem;
+      line-height: normal;
       font-weight: bold;
     }
 
+    .c2 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       display: -webkit-box;
       display: -webkit-flex;
@@ -111,6 +118,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Tennis
         </span>
@@ -128,9 +136,16 @@ it('renders correctly', () => {
     }
 
     .c2 {
+      font-size: 1rem;
+      line-height: normal;
       font-weight: bold;
     }
 
+    .c2 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       display: -webkit-box;
       display: -webkit-flex;
@@ -209,6 +224,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Handball
         </span>

package/dist/components/Atoms/ErrorText/__snapshots__/ErrorText.test.js.snap

@@ -19,6 +19,11 @@ exports[`renders correctly 1`] = `
   color: #E52630;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   display: inline-block;
   width: 100%;

package/dist/components/Atoms/Input/input.test.js

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

package/dist/components/Atoms/RadioButton/RadioButton.js

@@ -72,7 +72,8 @@ const RadioButton = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     id: value,
     ref: ref
   })), /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    weight: "bold"
+    weight: "bold",
+    size: "s"
   }, label));
 });
 RadioButton.propTypes = {

package/dist/components/Atoms/RadioButton/RadioButton.test.js

@@ -32,9 +32,16 @@ it('renders correctly', () => {
     }
 
     .c2 {
+      font-size: 1rem;
+      line-height: normal;
       font-weight: bold;
     }
 
+    .c2 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c1 {
       background-color: #FFFFFF;
       z-index: 1;
@@ -122,6 +129,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Male
         </span>
@@ -139,9 +147,16 @@ it('renders correctly', () => {
     }
 
     .c2 {
+      font-size: 1rem;
+      line-height: normal;
       font-weight: bold;
     }
 
+    .c2 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c1 {
       background-color: #FFFFFF;
       z-index: 1;
@@ -229,6 +244,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Female
         </span>

package/dist/components/Atoms/Select/__snapshots__/Select.test.js.snap

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

package/dist/components/Atoms/Text/Text.js

@@ -19,7 +19,7 @@ const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
     as,
     theme
   } = _ref;
-  return as !== undefined && (0, _styledComponents.css)(["", " &{", ";", ";", ";", ";", ";", ";color:", ";", ";", ";", ";}"], (0, _fontHelper.default)(theme, as), _ref2 => {
+  return as !== undefined && (0, _styledComponents.css)(["", " &{", ";", ";", ";", ";", ";", ";color:", ";", ";", ";", ";span{font-size:inherit;line-height:inherit;}}"], (0, _fontHelper.default)(theme, as), _ref2 => {
     let {
       size
     } = _ref2;

package/dist/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/dist/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/dist/components/Atoms/TextArea/TextArea.test.js

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

package/dist/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/dist/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/dist/components/Molecules/Accordion/Accordion.test.js

@@ -14,7 +14,8 @@ it('renders correctly', () => {
       size: "l"
     }, "I am the title")
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    tag: "p"
+    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"))).toJSON();
   expect(tree).toMatchSnapshot();
 });

package/dist/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/dist/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%;
@@ -330,6 +340,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;
@@ -351,6 +366,11 @@ it('renders press realese correctly', () => {
       text-transform: uppercase;
     }
 
+    .c10 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c4 {
       display: block;
       width: 80px;

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

@@ -11,7 +11,8 @@ it('renders correctly', () => {
     backgroundColor: "purple_dark"
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    color: "white"
+    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."))).toJSON();
   expect(tree).toMatchSnapshot();
 });

package/dist/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>