@comicrelief/component-library 8.44.1 → 8.44.3

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

@@ -41,6 +41,11 @@ it('renders correctly', () => {
       font-weight: 800;
     }
 
+    .c6 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c7 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 400;
@@ -53,6 +58,16 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
+    .c7 {
+      font-size: 1rem;
+      line-height: normal;
+    }
+
+    .c7 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c12 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 700;
@@ -65,7 +80,17 @@ it('renders correctly', () => {
       line-height: 1.5rem;
     }
 
-    .c22 {
+    .c12 {
+      font-size: 1rem;
+      line-height: normal;
+    }
+
+    .c12 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    .c16 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 400;
       text-transform: inherit;
@@ -77,12 +102,34 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
-    .c22 {
+    .c16 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    .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;
     }
 
+    .c23 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c1 {
       display: block;
       width: 100%;
@@ -110,7 +157,7 @@ it('renders correctly', () => {
       color: #000000;
     }
 
-    .c16 {
+    .c17 {
       margin-bottom: 0.5rem;
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 400;
@@ -123,12 +170,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 +192,7 @@ it('renders correctly', () => {
       align-items: center;
     }
 
-    .c19 {
+    .c20 {
       position: relative;
       box-sizing: border-box;
       width: 100%;
@@ -165,7 +212,7 @@ it('renders correctly', () => {
       font-family: inherit;
     }
 
-    .c19:focus {
+    .c20:focus {
       border: 1px solid #666;
     }
 
@@ -184,11 +231,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 +352,7 @@ it('renders correctly', () => {
       border-color: #E52630;
     }
 
-    .c21 {
+    .c22 {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -316,11 +363,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 +376,7 @@ it('renders correctly', () => {
       display: block;
     }
 
-    .c24 span {
+    .c25 span {
       position: absolute;
       padding: 0px 15px;
       font-size: 20px;
@@ -341,21 +388,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 +414,9 @@ it('renders correctly', () => {
       border-radius: 100px;
     }
 
-    .c25:active,
-    .c25:focus,
-    .c25:hover {
+    .c26:active,
+    .c26:focus,
+    .c26:hover {
       background-color: #961D35;
     }
 
@@ -416,28 +463,42 @@ it('renders correctly', () => {
     }
 
     @media (min-width:740px) {
-      .c22 {
+      .c16 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c16 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c23 {
         font-size: 1rem;
         line-height: 1.25rem;
       }
     }
 
     @media (min-width:1024px) {
-      .c22 {
+      .c23 {
         font-size: 1.125rem;
         line-height: 1.375rem;
       }
     }
 
     @media (min-width:740px) {
-      .c16 {
+      .c17 {
         font-size: 1rem;
         line-height: 1.25rem;
       }
     }
 
     @media (min-width:1024px) {
-      .c16 {
+      .c17 {
         font-size: 1rem;
         line-height: 1.25rem;
       }
@@ -494,7 +555,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 +563,7 @@ it('renders correctly', () => {
     }
 
     @media (min-width:1024px) {
-      .c25 {
+      .c26 {
         width: auto;
         padding: 1rem 2rem;
         margin: 0 auto 2rem;
@@ -542,6 +603,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 +624,7 @@ it('renders correctly', () => {
                 <h3
                   className="c12"
                   color="inherit"
+                  size="s"
                 >
                   Choose your monthly donation
                 </h3>
@@ -574,7 +637,7 @@ it('renders correctly', () => {
                   htmlFor="mship-1--moneyBuy-box1"
                 >
                   <span
-                    className="c7 c16"
+                    className="c16 c17"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -583,16 +646,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 +670,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 +683,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 +711,7 @@ it('renders correctly', () => {
                   htmlFor="mship-1--moneyBuy-box3"
                 >
                   <span
-                    className="c7 c16"
+                    className="c16 c17"
                     color="inherit"
                     dangerouslySetInnerHTML={
                       Object {
@@ -657,16 +720,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 +745,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 +768,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 +799,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/dist/components/Organisms/WYMDCarousel/__snapshots__/WYMDCarousel.test.js.snap

@@ -357,6 +357,11 @@ exports[`renders correctly:
   font-weight: bold;
 }
 
+.c1 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c3 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
@@ -376,6 +381,11 @@ exports[`renders correctly:
   color: #E52630;
 }
 
+.c3 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c5 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -388,6 +398,11 @@ exports[`renders correctly:
   line-height: 1.25rem;
 }
 
+.c5 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c2 {
   width: 75%;
   margin: 0 auto;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.44.1",
+  "version": "8.44.3",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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,9 +26,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;
@@ -107,6 +114,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Tennis
         </span>
@@ -124,9 +132,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;
@@ -205,6 +220,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Handball
         </span>

package/src/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/src/components/Atoms/Input/input.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;
@@ -199,6 +204,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/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,9 +26,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;
@@ -116,6 +123,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Male
         </span>
@@ -133,9 +141,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;
@@ -223,6 +238,7 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
+          size="s"
         >
           Female
         </span>

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

@@ -53,6 +53,12 @@ export const BaseText = styled.span`
           color: ${theme.color(mobileColor)};
         }
       `};
+      
+      // Ensure any *nested* content doesn't 
+      span {
+        font-size: inherit;
+        line-height: inherit;
+      }
     }
   `)};
 `;