@comicrelief/component-library 8.44.0 → 8.44.2

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,6 +30,8 @@ it('renders correctly', () => {
     }
 
     .c2 {
+      font-size: 1rem;
+      line-height: normal;
       font-weight: bold;
     }
 
@@ -111,6 +113,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Tennis
         </span>
@@ -128,6 +131,8 @@ it('renders correctly', () => {
     }
 
     .c2 {
+      font-size: 1rem;
+      line-height: normal;
       font-weight: bold;
     }
 
@@ -209,6 +214,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Handball
         </span>

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,6 +32,8 @@ it('renders correctly', () => {
     }
 
     .c2 {
+      font-size: 1rem;
+      line-height: normal;
       font-weight: bold;
     }
 
@@ -122,6 +124,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Male
         </span>
@@ -139,6 +142,8 @@ it('renders correctly', () => {
     }
 
     .c2 {
+      font-size: 1rem;
+      line-height: normal;
       font-weight: bold;
     }
 
@@ -229,6 +234,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Female
         </span>

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

@@ -30,6 +30,11 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
+.c6 {
+  font-size: 1rem;
+  line-height: normal;
+}
+
 .c4 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
@@ -189,6 +194,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/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,6 +14,8 @@ exports[`renders correctly 1`] = `
 }
 
 .c2 {
+  font-size: 1rem;
+  line-height: normal;
   color: #FFFFFF;
 }
 
@@ -63,6 +65,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/dist/components/Organisms/Footer/Footer.js

@@ -44,7 +44,8 @@ const Footer = _ref => {
     overrideallowList: overrideallowList
   }, rest)), showFundraisingRegulatorLogo && /*#__PURE__*/_react.default.createElement(_FundraisingRegulatorLogo.default, null), /*#__PURE__*/_react.default.createElement(_Footer.FooterCopyright, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    color: "grey"
+    color: "grey",
+    size: "s"
   }, footerCopy)))));
 };
 var _default = exports.default = Footer;

package/dist/components/Organisms/Footer/Nav/Nav.js

@@ -58,7 +58,8 @@ const FooterNav = _ref => {
     role: "navigation"
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     id: "footer-menu",
-    tag: "h2"
+    tag: "h2",
+    size: "s"
   }, "Footer navigation"), /*#__PURE__*/_react.default.createElement(_Nav.NavMenu, {
     role: "menubar"
   }, menuGroups.map((group, index) => /*#__PURE__*/_react.default.createElement(_Nav.NavItem, {
@@ -68,7 +69,8 @@ const FooterNav = _ref => {
     isSubMenuOpen: !!isSubMenuOpen[group.id]
   }, !isSmallBreakpoint ? /*#__PURE__*/_react.default.createElement(_Text.default, {
     color: "white",
-    weight: "bold"
+    weight: "bold",
+    size: "s"
   }, group.title) : /*#__PURE__*/_react.default.createElement(_Nav.NavLink, Object.assign({
     href: "#",
     inline: true,
@@ -77,7 +79,8 @@ const FooterNav = _ref => {
     role: "button",
     onClick: toggleSubMenu(group.id)
   }, rest), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    color: "white"
+    color: "white",
+    size: "s"
   }, group.title)), group.links && group.links.length > 0 && /*#__PURE__*/_react.default.createElement(_Nav.SubNavMenu, {
     role: "list",
     "aria-label": group.title,
@@ -95,7 +98,8 @@ const FooterNav = _ref => {
       inline: true,
       role: "menuitem"
     }, rest), /*#__PURE__*/_react.default.createElement(_Text.default, {
-      color: "white"
+      color: "white",
+      size: "s"
     }, child.title)));
   }))))));
 };

package/dist/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -13,6 +13,11 @@ exports[`renders correctly 1`] = `
   line-height: 1.5rem;
 }
 
+.c12 {
+  font-size: 1rem;
+  line-height: normal;
+}
+
 .c15 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -26,6 +31,8 @@ exports[`renders correctly 1`] = `
 }
 
 .c15 {
+  font-size: 1rem;
+  line-height: normal;
   font-weight: bold;
   color: #FFFFFF;
 }
@@ -43,6 +50,8 @@ exports[`renders correctly 1`] = `
 }
 
 .c20 {
+  font-size: 1rem;
+  line-height: normal;
   color: #FFFFFF;
 }
 
@@ -59,6 +68,8 @@ exports[`renders correctly 1`] = `
 }
 
 .c25 {
+  font-size: 1rem;
+  line-height: normal;
   color: #969598;
 }
 
@@ -739,6 +750,7 @@ exports[`renders correctly 1`] = `
           className="c12"
           color="inherit"
           id="footer-menu"
+          size="s"
         >
           Footer navigation
         </h2>
@@ -753,6 +765,7 @@ exports[`renders correctly 1`] = `
             <span
               className="c15"
               color="white"
+              size="s"
             >
               Hear from us
             </span>
@@ -775,6 +788,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Get the newsletter
                   </span>
@@ -794,6 +808,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     How we contact you
                   </span>
@@ -808,6 +823,7 @@ exports[`renders correctly 1`] = `
             <span
               className="c15"
               color="white"
+              size="s"
             >
               Get in touch
             </span>
@@ -830,6 +846,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Contact us
                   </span>
@@ -849,6 +866,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Your Gift Aid
                   </span>
@@ -868,6 +886,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     FAQs
                   </span>
@@ -887,6 +906,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Red Nose Day 2019 FAQs
                   </span>
@@ -901,6 +921,7 @@ exports[`renders correctly 1`] = `
             <span
               className="c15"
               color="white"
+              size="s"
             >
               About us
             </span>
@@ -923,6 +944,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Mission
                   </span>
@@ -942,6 +964,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Our history
                   </span>
@@ -961,6 +984,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Finances
                   </span>
@@ -980,6 +1004,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Partners
                   </span>
@@ -999,6 +1024,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Meet the team
                   </span>
@@ -1018,6 +1044,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Sport Relief
                   </span>
@@ -1032,6 +1059,7 @@ exports[`renders correctly 1`] = `
             <span
               className="c15"
               color="white"
+              size="s"
             >
               Careers
             </span>
@@ -1054,6 +1082,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Working at Comic Relief
                   </span>
@@ -1073,6 +1102,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Open roles
                   </span>
@@ -1087,6 +1117,7 @@ exports[`renders correctly 1`] = `
             <span
               className="c15"
               color="white"
+              size="s"
             >
               News
             </span>
@@ -1109,6 +1140,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     News
                   </span>
@@ -1128,6 +1160,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Press area
                   </span>
@@ -1142,6 +1175,7 @@ exports[`renders correctly 1`] = `
             <span
               className="c15"
               color="white"
+              size="s"
             >
               Legal
             </span>
@@ -1164,6 +1198,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Link comp with both URL and Ref
                   </span>
@@ -1183,6 +1218,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Link comp with only Ref
                   </span>
@@ -1202,6 +1238,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Link comp with only URL
                   </span>
@@ -1226,6 +1263,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Test allowListed external link
                   </span>
@@ -1245,6 +1283,7 @@ exports[`renders correctly 1`] = `
                   <span
                     className="c20"
                     color="white"
+                    size="s"
                   >
                     Test non-allowListed external link
                   </span>
@@ -1265,6 +1304,7 @@ exports[`renders correctly 1`] = `
         <p
           className="c25"
           color="grey"
+          size="s"
         >
           Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 6th Floor, The White Chapel Building, 10 Whitechapel High Street, London, E1 8QS.
         </p>

package/dist/components/Organisms/Header/HeaderNav/HeaderNav.js

@@ -83,7 +83,8 @@ const HeaderNav = _ref => {
     role: "navigation"
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     id: "main-menu",
-    tag: "h2"
+    tag: "h2",
+    size: "s"
   }, "Main navigation"), /*#__PURE__*/_react.default.createElement(_HeaderNav.NavMenu, {
     role: "menubar"
   }, theseGroups.map((group, index) => {

package/dist/components/Organisms/Header/Nav/Nav.js

@@ -63,7 +63,8 @@ const MainNav = _ref => {
     role: "navigation"
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     id: "main-menu",
-    tag: "h2"
+    tag: "h2",
+    size: "s"
   }, "Main navigation"), /*#__PURE__*/_react.default.createElement(_Nav.NavMenu, {
     role: "menubar"
   }, menuGroups.map((group, index) => {

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js

@@ -123,7 +123,8 @@ const HeaderNav2025 = _ref => {
     id: "main-nav"
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     id: "main-menu",
-    tag: "h2"
+    tag: "h2",
+    size: "s"
   }, "Main navigation"), processedItems &&
   /*#__PURE__*/
   // First level of the navigation (ul tag): Parent

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js

@@ -16,7 +16,7 @@ const transitionDuration = 0.2;
 const NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "HeaderNav2025style__NavLinkClass",
   componentId: "sc-xflhtq-0"
-})(["display:inline-block;border:0;padding:25px;line-height:1rem;height:auto;font-weight:700;width:100%;color:", ";transition:color ", "s ease;text-decoration:none;:hover,:focus,:focus-within{border:0;}@media ", "{:hover,:focus{color:", ";background-color:", ";font-weight:inherit;}:focus-within{background-color:", ";&:hover{background-color:", ";}}}> div{height:auto;transition:transform 0.35s cubic-bezier(0.41,1.64,0.41,0.8);", "}"], _ref => {
+})(["display:inline-block;border:0;padding:25px;line-height:1rem;height:auto;font-weight:700;width:100%;color:", ";transition:color ", "s ease;text-decoration:none;:hover,:focus,:focus-within{border:0;}@media ", "{:hover,:focus{color:", ";background-color:", ";font-weight:700;}:focus-within{background-color:", ";&:hover{background-color:", ";}}}> div{height:auto;transition:transform 0.35s cubic-bezier(0.41,1.64,0.41,0.8);", "}"], _ref => {
   let {
     theme
   } = _ref;

package/dist/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDSForm.js

@@ -76,7 +76,8 @@ const MarketingPreferencesDSForm = () => {
   } = formMethodsCustom;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    weight: "bold"
+    weight: "bold",
+    size: "s"
   }, "Our default instance:"), /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, formMethods, /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: handleSubmit(customSubmitHandler),
     noValidate: true
@@ -91,7 +92,8 @@ const MarketingPreferencesDSForm = () => {
     size: "xl"
   }, "- - - - - - - - - - - - - "), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    weight: "bold"
+    weight: "bold",
+    size: "s"
   }, "Our customised instance:"), /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, formMethodsCustom, /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: handleSubmitCustom(customSubmitHandler),
     noValidate: true

package/dist/components/Organisms/Membership/Form/Form.js

@@ -122,7 +122,8 @@ const Signup = _ref => {
   return /*#__PURE__*/_react.default.createElement(_Membership2.FormWrapper, null, /*#__PURE__*/_react.default.createElement(_Membership2.Form, {
     onSubmit: e => submitDonation(e, amountDonate, clientID, cartID, mbshipID, donateLink)
   }, /*#__PURE__*/_react.default.createElement(_Membership2.OuterFieldset, null, /*#__PURE__*/_react.default.createElement(_Membership2.Legend, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    tag: "h3"
+    tag: "h3",
+    size: "s"
   }, "Choose your monthly donation")), /*#__PURE__*/_react.default.createElement(_Membership2.MoneyBuys, null, MoneyBoxes), /*#__PURE__*/_react.default.createElement(_Membership2.FormFieldset, null, /*#__PURE__*/_react.default.createElement(_Membership2.Label, {
     size: "s",
     weight: "500"

package/dist/components/Organisms/Membership/Membership.js

@@ -43,7 +43,8 @@ const Membership = _ref => {
     size: "l",
     weight: "800"
   }, title), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    tag: "p"
+    tag: "p",
+    size: "s"
   }, subtitle)), /*#__PURE__*/_react.default.createElement(_Form.default, {
     data: data,
     otherDescription: otherDescription,