@comicrelief/component-library 8.44.0 → 8.44.2

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

@@ -53,6 +53,11 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
+    .c7 {
+      font-size: 1rem;
+      line-height: normal;
+    }
+
     .c12 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 700;
@@ -65,7 +70,12 @@ it('renders correctly', () => {
       line-height: 1.5rem;
     }
 
-    .c22 {
+    .c12 {
+      font-size: 1rem;
+      line-height: normal;
+    }
+
+    .c16 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 400;
       text-transform: inherit;
@@ -77,7 +87,19 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
-    .c22 {
+    .c23 {
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
+      text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
+    }
+
+    .c23 {
       font-size: 1rem;
       line-height: normal;
       font-weight: 500;
@@ -110,7 +132,7 @@ it('renders correctly', () => {
       color: #000000;
     }
 
-    .c16 {
+    .c17 {
       margin-bottom: 0.5rem;
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 400;
@@ -123,12 +145,12 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
-    .c17 {
+    .c18 {
       position: relative;
       font-size: 1.25rem;
     }
 
-    .c18 {
+    .c19 {
       position: relative;
       width: 100%;
       display: -webkit-box;
@@ -145,7 +167,7 @@ it('renders correctly', () => {
       align-items: center;
     }
 
-    .c19 {
+    .c20 {
       position: relative;
       box-sizing: border-box;
       width: 100%;
@@ -165,7 +187,7 @@ it('renders correctly', () => {
       font-family: inherit;
     }
 
-    .c19:focus {
+    .c20:focus {
       border: 1px solid #666;
     }
 
@@ -184,11 +206,11 @@ it('renders correctly', () => {
       height: auto;
     }
 
-    .c20 {
+    .c21 {
       display: block;
     }
 
-    .c20 input {
+    .c21 input {
       border: 2px solid #E1E2E3;
       font-size: 1.5rem;
       font-weight: 700;
@@ -305,7 +327,7 @@ it('renders correctly', () => {
       border-color: #E52630;
     }
 
-    .c21 {
+    .c22 {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -316,11 +338,11 @@ it('renders correctly', () => {
       align-items: center;
     }
 
-    .c23 {
+    .c24 {
       margin-right: auto;
     }
 
-    .c24 {
+    .c25 {
       position: relative;
       -webkit-flex: 0 0 50%;
       -ms-flex: 0 0 50%;
@@ -329,7 +351,7 @@ it('renders correctly', () => {
       display: block;
     }
 
-    .c24 span {
+    .c25 span {
       position: absolute;
       padding: 0px 15px;
       font-size: 20px;
@@ -341,21 +363,21 @@ it('renders correctly', () => {
       font-weight: 500;
     }
 
-    .c24 input {
+    .c25 input {
       border: 2px solid #E1E2E3;
       background: transparent;
       padding: 0.5rem 1rem 0.5rem 2rem;
     }
 
-    .c24 input:focus {
+    .c25 input:focus {
       border: 2px solid #E52630;
     }
 
-    .c26 {
+    .c27 {
       line-height: 1.5;
     }
 
-    .c25 {
+    .c26 {
       width: 100%;
       color: #FFFFFF;
       font-size: 1rem;
@@ -367,9 +389,9 @@ it('renders correctly', () => {
       border-radius: 100px;
     }
 
-    .c25:active,
-    .c25:focus,
-    .c25:hover {
+    .c26:active,
+    .c26:focus,
+    .c26:hover {
       background-color: #961D35;
     }
 
@@ -416,28 +438,42 @@ it('renders correctly', () => {
     }
 
     @media (min-width:740px) {
-      .c22 {
+      .c16 {
         font-size: 1rem;
         line-height: 1.25rem;
       }
     }
 
     @media (min-width:1024px) {
-      .c22 {
+      .c16 {
         font-size: 1.125rem;
         line-height: 1.375rem;
       }
     }
 
     @media (min-width:740px) {
-      .c16 {
+      .c23 {
         font-size: 1rem;
         line-height: 1.25rem;
       }
     }
 
     @media (min-width:1024px) {
-      .c16 {
+      .c23 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c17 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c17 {
         font-size: 1rem;
         line-height: 1.25rem;
       }
@@ -494,7 +530,7 @@ it('renders correctly', () => {
     }
 
     @media (min-width:1024px) {
-      .c24 {
+      .c25 {
         -webkit-flex: 0 0 60%;
         -ms-flex: 0 0 60%;
         flex: 0 0 60%;
@@ -502,7 +538,7 @@ it('renders correctly', () => {
     }
 
     @media (min-width:1024px) {
-      .c25 {
+      .c26 {
         width: auto;
         padding: 1rem 2rem;
         margin: 0 auto 2rem;
@@ -542,6 +578,7 @@ it('renders correctly', () => {
           <p
             className="c7"
             color="inherit"
+            size="s"
           >
             Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.
           </p>
@@ -562,6 +599,7 @@ it('renders correctly', () => {
                 <h3
                   className="c12"
                   color="inherit"
+                  size="s"
                 >
                   Choose your monthly donation
                 </h3>
@@ -574,7 +612,7 @@ it('renders correctly', () => {
                   htmlFor="mship-1--moneyBuy-box1"
                 >
                   <span
-                    className="c7 c16"
+                    className="c16 c17"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -583,16 +621,16 @@ it('renders correctly', () => {
                     }
                   />
                   <div
-                    className="c17"
+                    className="c18"
                   >
                     
                     <div
-                      className="c18"
+                      className="c19"
                     >
                       <input
                         aria-label="£5"
                         aria-required={false}
-                        className="c19"
+                        className="c20"
                         id="mship-1--moneyBuy-box1"
                         name="mship-1--moneyBuy1"
                         onClick={[Function]}
@@ -607,11 +645,11 @@ it('renders correctly', () => {
                   
                 </label>
                 <label
-                  className="c14 c20"
+                  className="c14 c21"
                   htmlFor="mship-1--moneyBuy-box2"
                 >
                   <span
-                    className="c7 c16"
+                    className="c16 c17"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -620,16 +658,16 @@ it('renders correctly', () => {
                     }
                   />
                   <div
-                    className="c17"
+                    className="c18"
                   >
                     
                     <div
-                      className="c18"
+                      className="c19"
                     >
                       <input
                         aria-label="£10"
                         aria-required={false}
-                        className="c19"
+                        className="c20"
                         id="mship-1--moneyBuy-box2"
                         name="mship-1--moneyBuy2"
                         onClick={[Function]}
@@ -648,7 +686,7 @@ it('renders correctly', () => {
                   htmlFor="mship-1--moneyBuy-box3"
                 >
                   <span
-                    className="c7 c16"
+                    className="c16 c17"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -657,16 +695,16 @@ it('renders correctly', () => {
                     }
                   />
                   <div
-                    className="c17"
+                    className="c18"
                   >
                     
                     <div
-                      className="c18"
+                      className="c19"
                     >
                       <input
                         aria-label="£20"
                         aria-required={false}
-                        className="c19"
+                        className="c20"
                         id="mship-1--moneyBuy-box3"
                         name="mship-1--moneyBuy3"
                         onClick={[Function]}
@@ -682,21 +720,21 @@ it('renders correctly', () => {
                 </label>
               </div>
               <div
-                className="c21"
+                className="c22"
               >
                 <span
-                  className="c22 c23"
+                  className="c23 c24"
                   color="inherit"
                   size="s"
                 >
                   Other amount
                 </span>
                 <label
-                  className="c14 c24"
+                  className="c14 c25"
                   htmlFor="mship-1--MoneyBuy-userInput"
                 >
                   <span
-                    className="c7 c16"
+                    className="c16 c17"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -705,16 +743,16 @@ it('renders correctly', () => {
                     }
                   />
                   <div
-                    className="c17"
+                    className="c18"
                   >
                     
                     <div
-                      className="c18"
+                      className="c19"
                     >
                       <input
                         aria-label="Input a different amount"
                         aria-required={false}
-                        className="c19"
+                        className="c20"
                         id="mship-1--MoneyBuy-userInput"
                         max="25000"
                         min="1"
@@ -736,12 +774,12 @@ it('renders correctly', () => {
                 </label>
               </div>
               <input
-                className="c25"
+                className="c26"
                 type="submit"
                 value="Donate"
               />
               <p
-                className="c26"
+                className="c27"
               />
             </fieldset>
           </form>

package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.js

@@ -109,9 +109,11 @@ const WYMDCarousel = _ref => {
         tag: "h1",
         family: "Anton",
         uppercase: true,
-        weight: "normal"
+        weight: "normal",
+        size: "s"
       }, theseItems[key].amount)), /*#__PURE__*/_react.default.createElement(_WYMDCarousel.CopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
-        tag: "p"
+        tag: "p",
+        size: "s"
       }, theseItems[key].copy))))
     );
   }), isMobile === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.44.0",
+  "version": "8.44.2",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -47,7 +47,15 @@
     "yup": "^1.4.0"
   },
   "resolutions": {
-    "react-scripts/workbox-webpack-plugin/workbox-build/@surma/rollup-plugin-off-main-thread/ejs": "3.1.6"
+    "react-scripts/workbox-webpack-plugin/workbox-build/@surma/rollup-plugin-off-main-thread/ejs": "3.1.10",
+    "loader-utils": "2.0.3",
+    "unset-value": "2.0.1",
+    "shell-quote": "1.7.3",
+    "ansi-html": "0.0.9",
+    "semver": "7.5.2",
+    "braces": "3.0.3",
+    "node-forge": "1.3.2",
+    "nth-check": "2.0.1"
   },
   "scripts": {
     "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js",
@@ -80,7 +88,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@playwright/test": "^1.38.1",
     "cross-env": "^7.0.3",
-    "ejs": "^3.1.9",
+    "ejs": "^3.1.10",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.27.5",

package/src/components/Atoms/Checkbox/Checkbox.js

@@ -80,7 +80,7 @@ const Checkbox = React.forwardRef(({
       checkboxBorderFocus={checkboxBorderFocus}
     />
     <span />
-    {label ? <Text weight="bold">{label}</Text> : children}
+    {label ? <Text weight="bold" size="s">{label}</Text> : children}
   </Label>
 ));
 

package/src/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/src/components/Atoms/Checkbox/Checkbox.test.js

@@ -26,6 +26,8 @@ it('renders correctly', () => {
     }
 
     .c2 {
+      font-size: 1rem;
+      line-height: normal;
       font-weight: bold;
     }
 
@@ -107,6 +109,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Tennis
         </span>
@@ -124,6 +127,8 @@ it('renders correctly', () => {
     }
 
     .c2 {
+      font-size: 1rem;
+      line-height: normal;
       font-weight: bold;
     }
 
@@ -205,6 +210,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Handball
         </span>

package/src/components/Atoms/RadioButton/RadioButton.js

@@ -71,7 +71,7 @@ const RadioButton = React.forwardRef(({
       ref={ref}
     />
     <span />
-    <Text weight="bold">{label}</Text>
+    <Text weight="bold" size="s">{label}</Text>
   </Label>
 ));
 

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

@@ -26,6 +26,8 @@ it('renders correctly', () => {
     }
 
     .c2 {
+      font-size: 1rem;
+      line-height: normal;
       font-weight: bold;
     }
 
@@ -116,6 +118,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Male
         </span>
@@ -133,6 +136,8 @@ it('renders correctly', () => {
     }
 
     .c2 {
+      font-size: 1rem;
+      line-height: normal;
       font-weight: bold;
     }
 
@@ -223,6 +228,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Female
         </span>

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

@@ -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/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,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/src/components/Organisms/Footer/Footer.js

@@ -43,7 +43,7 @@ const Footer = ({
           { showFundraisingRegulatorLogo && <FundraisingRegulatorLogo /> }
 
           <FooterCopyright>
-            <Text tag="p" color="grey">
+            <Text tag="p" color="grey" size="s">
               {footerCopy}
             </Text>
           </FooterCopyright>

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

@@ -53,7 +53,7 @@ const FooterNav = ({ navItems = {}, ...rest }) => {
 
   return (
     <Nav aria-label="main-menu" isExpandable={isExpandable} role="navigation">
-      <Text id="footer-menu" tag="h2">
+      <Text id="footer-menu" tag="h2" size="s">
         Footer navigation
       </Text>
 
@@ -67,7 +67,7 @@ const FooterNav = ({ navItems = {}, ...rest }) => {
             isSubMenuOpen={!!isSubMenuOpen[group.id]}
           >
             {!isSmallBreakpoint ? (
-              <Text color="white" weight="bold">
+              <Text color="white" weight="bold" size="s">
                 {group.title}
               </Text>
             ) : (
@@ -80,7 +80,7 @@ const FooterNav = ({ navItems = {}, ...rest }) => {
                 onClick={toggleSubMenu(group.id)}
                 {...rest}
               >
-                <Text color="white">{group.title}</Text>
+                <Text color="white" size="s">{group.title}</Text>
               </NavLink>
             )}
             {/* Second level of the navigation (ul tag): Child(ren) */}
@@ -105,7 +105,7 @@ const FooterNav = ({ navItems = {}, ...rest }) => {
                       }
                     >
                       <SubNavLink href={thisUrl} inline role="menuitem" {...rest}>
-                        <Text color="white">{child.title}</Text>
+                        <Text color="white" size="s">{child.title}</Text>
                       </SubNavLink>
                     </SubNavItem>
                   );