@comicrelief/component-library 8.43.0 → 8.44.1

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

@@ -26,35 +26,63 @@ it('renders correctly', () => {
 
   expect(tree).toMatchInlineSnapshot(`
     .c6 {
+      font-family: 'Anton',Impact,sans-serif;
+      font-weight: 400;
+      text-transform: uppercase;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
       font-size: 1.5rem;
       line-height: 1.5rem;
-      text-transform: inherit;
+    }
+
+    .c6 {
+      font-size: 1.5rem;
+      line-height: normal;
       font-weight: 800;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
     .c7 {
-      font-size: 1rem;
-      line-height: 1rem;
-      text-transform: inherit;
-      line-height: normal;
       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;
     }
 
     .c12 {
-      font-size: 1rem;
-      line-height: 1rem;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 700;
       text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1.25rem;
+      line-height: 1.5rem;
+    }
+
+    .c22 {
       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;
     }
 
     .c22 {
       font-size: 1rem;
-      line-height: 1rem;
-      text-transform: inherit;
-      font-weight: 500;
       line-height: normal;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 500;
     }
 
     .c1 {
@@ -86,7 +114,15 @@ it('renders correctly', () => {
 
     .c16 {
       margin-bottom: 0.5rem;
-      font-weight: normal;
+      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;
     }
 
     .c17 {
@@ -128,7 +164,7 @@ it('renders correctly', () => {
       border-radius: 0.5rem;
       font-size: inherit;
       z-index: 2;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-family: inherit;
     }
 
     .c19:focus {
@@ -142,7 +178,7 @@ it('renders correctly', () => {
     .c15 input {
       border: 2px solid #E1E2E3;
       font-size: 1.5rem;
-      font-weight: 800;
+      font-weight: 700;
       -webkit-letter-spacing: -2px;
       -moz-letter-spacing: -2px;
       -ms-letter-spacing: -2px;
@@ -157,7 +193,7 @@ it('renders correctly', () => {
     .c20 input {
       border: 2px solid #E1E2E3;
       font-size: 1.5rem;
-      font-weight: 800;
+      font-weight: 700;
       -webkit-letter-spacing: -2px;
       -moz-letter-spacing: -2px;
       -ms-letter-spacing: -2px;
@@ -339,6 +375,76 @@ it('renders correctly', () => {
       background-color: #961D35;
     }
 
+    @media (min-width:740px) {
+      .c6 {
+        font-size: 1.875rem;
+        line-height: 1.875rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c6 {
+        font-size: 2rem;
+        line-height: 2rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c7 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c7 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c12 {
+        font-size: 1.25rem;
+        line-height: 1.5rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c12 {
+        font-size: 1.375rem;
+        line-height: 1.625rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c22 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c22 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c16 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c16 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
     @media (min-width:740px) {
 
     }
@@ -438,7 +544,6 @@ 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>
@@ -459,7 +564,6 @@ it('renders correctly', () => {
                 <h3
                   className="c12"
                   color="inherit"
-                  size="s"
                 >
                   Choose your monthly donation
                 </h3>
@@ -479,7 +583,6 @@ it('renders correctly', () => {
                         "__html": "",
                       }
                     }
-                    size="s"
                   />
                   <div
                     className="c17"
@@ -517,7 +620,6 @@ it('renders correctly', () => {
                         "__html": "",
                       }
                     }
-                    size="s"
                   />
                   <div
                     className="c17"
@@ -555,7 +657,6 @@ it('renders correctly', () => {
                         "__html": "",
                       }
                     }
-                    size="s"
                   />
                   <div
                     className="c17"
@@ -604,7 +705,6 @@ it('renders correctly', () => {
                         "__html": "£",
                       }
                     }
-                    size="s"
                   />
                   <div
                     className="c17"

package/src/components/Organisms/Membership/MoneyBox/MoneyBox.js

@@ -9,7 +9,7 @@ const MoneyBox = styled(Input)`
   input {
     border: 2px solid ${({ theme }) => theme.color('grey_medium')};
     font-size: ${({ theme }) => theme.fontSize('l')};
-    font-weight: 800;
+    font-weight: 700;
     letter-spacing: -2px;
     height: auto;
 

package/src/components/Organisms/WYMDCarousel/__snapshots__/WYMDCarousel.test.js.snap

@@ -342,33 +342,50 @@ exports[`renders correctly:
     </div>
    1`] = `
 .c1 {
-  font-size: 1rem;
-  line-height: 1rem;
+  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;
+}
+
+.c1 {
   font-weight: bold;
-  line-height: normal;
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
 .c3 {
-  color: #E52630;
-  font-size: 1rem;
-  line-height: 1rem;
+  font-family: 'Anton',Impact,sans-serif;
+  font-weight: 400;
   text-transform: uppercase;
-  font-weight: normal;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 2rem;
+  line-height: 2rem;
+}
+
+.c3 {
   font-family: 'Anton',Impact,sans-serif;
-  -webkit-letter-spacing: 0.03rem;
-  -moz-letter-spacing: 0.03rem;
-  -ms-letter-spacing: 0.03rem;
-  letter-spacing: 0.03rem;
+  font-weight: normal;
+  text-transform: uppercase;
+  color: #E52630;
 }
 
 .c5 {
-  font-size: 1rem;
-  line-height: 1rem;
-  text-transform: inherit;
-  line-height: normal;
   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;
 }
 
 .c2 {
@@ -501,6 +518,48 @@ exports[`renders correctly:
   flex-direction: column;
 }
 
+@media (min-width:740px) {
+  .c1 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c1 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c3 {
+    font-size: 2.5rem;
+    line-height: 2.5rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c3 {
+    font-size: 3rem;
+    line-height: 3rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c5 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c5 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:1024px) {
   .c2:first-child {
     font-size: 20px;
@@ -661,21 +720,18 @@ exports[`renders correctly:
   <p
     className="c1 c2"
     color="inherit"
-    size="s"
   >
     Over the past two years, we’ve supported
   </p>
   <h1
     className="c3 c4"
     color="red"
-    size="s"
   >
     11.7 million people
   </h1>
   <p
     className="c5 c6"
     color="inherit"
-    size="s"
   >
     including...
   </p>

package/src/theme/crTheme/fontConfig.js

@@ -0,0 +1,211 @@
+export default {
+  h1: {
+    family: 'Anton',
+    weight: 400,
+    transform: 'uppercase',
+    small: {
+      fontSize: '2rem',
+      lineHeight: '2rem'
+    },
+    medium: {
+      fontSize: '2.5rem',
+      lineHeight: '2.5rem'
+    },
+    large: {
+      fontSize: '3rem',
+      lineHeight: '3rem'
+    }
+  },
+  h2: {
+    family: 'Anton',
+    weight: 400,
+    transform: 'uppercase',
+    small: {
+      fontSize: '1.5rem',
+      lineHeight: '1.5rem'
+    },
+    medium: {
+      fontSize: '1.875rem',
+      lineHeight: '1.875rem'
+    },
+    large: {
+      fontSize: '2rem',
+      lineHeight: '2rem'
+    }
+  },
+  h3: {
+    family: 'Montserrat',
+    weight: 700,
+    transform: 'inherit',
+    small: {
+      fontSize: '1.25rem',
+      lineHeight: '1.5rem'
+    },
+    medium: {
+      fontSize: '1.25rem',
+      lineHeight: '1.5rem'
+    },
+    large: {
+      fontSize: '1.375rem',
+      lineHeight: '1.625rem'
+    }
+  },
+  h4: {
+    family: 'Montserrat',
+    weight: 700,
+    transform: 'inherit',
+    small: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    medium: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    large: {
+      fontSize: '1.125rem',
+      lineHeight: '1.375rem'
+    }
+  },
+  // H5 and H6 to be phased out of usage, but keeping
+  // some config here to keep pre-existing usage happy:
+  h5: {
+    family: 'Montserrat',
+    weight: 700,
+    transform: 'inherit',
+    small: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    medium: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    large: {
+      fontSize: '1.125rem',
+      lineHeight: '1.375rem'
+    }
+  },
+  h6: {
+    family: 'Montserrat',
+    weight: 700,
+    transform: 'inherit',
+    small: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    medium: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    large: {
+      fontSize: '1.125rem',
+      lineHeight: '1.375rem'
+    }
+  },
+  p: {
+    family: 'Montserrat',
+    weight: 400,
+    transform: 'inherit',
+    small: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    medium: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    large: {
+      fontSize: '1.125rem',
+      lineHeight: '1.375rem'
+    }
+  },
+  span: {
+    family: 'Montserrat',
+    weight: 400,
+    transform: 'inherit',
+    small: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    medium: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    large: {
+      fontSize: '1.125rem',
+      lineHeight: '1.375rem'
+    }
+  },
+  // To be used directly (not via fontHelper), but makes sense to keep here:
+  button: {
+    family: 'Montserrat',
+    weight: 400,
+    transform: 'inherit',
+    small: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    medium: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    large: {
+      fontSize: '1.125rem',
+      lineHeight: '1.375rem'
+    }
+  },
+  // Admittedly, while the same for each breakpoint, these 2
+  // config objects made sense to keep it here all the same.
+  formFieldLabel: {
+    family: 'Montserrat',
+    weight: 400,
+    transform: 'inherit',
+    small: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    medium: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    },
+    large: {
+      fontSize: '1rem',
+      lineHeight: '1.25rem'
+    }
+  },
+  formFieldInput: {
+    family: 'Montserrat',
+    weight: 400,
+    transform: 'inherit',
+    small: {
+      fontSize: '1.25rem',
+      lineHeight: '1.25rem'
+    },
+    medium: {
+      fontSize: '1.25rem',
+      lineHeight: '1.25rem'
+    },
+    large: {
+      fontSize: '1.25rem',
+      lineHeight: '1.25rem'
+    }
+  },
+  formFieldError: {
+    family: 'Montserrat',
+    weight: 400,
+    transform: 'inherit',
+    small: {
+      fontSize: '0.875rem',
+      lineHeight: '1.063rem'
+    },
+    medium: {
+      fontSize: '0.875rem',
+      lineHeight: '1.063rem'
+    },
+    large: {
+      fontSize: '0.875rem',
+      lineHeight: '1.063rem'
+    }
+  }
+};

package/src/theme/crTheme/fontHelper.js

@@ -0,0 +1,31 @@
+import fontConfig from './fontConfig';
+
+export default (theme, thisTag) => {
+  // Check we've got a match, just in case:
+  if (Object.keys(fontConfig).includes(thisTag)) {
+    return `
+      // General styles:
+      font-family: ${theme.fontFamilies(fontConfig[thisTag].family)};
+      font-weight: ${fontConfig[thisTag].weight};
+      text-transform: ${fontConfig[thisTag].transform};
+      letter-spacing: 0;
+
+      // XS and S breakpoint ("mobile") 
+      font-size: ${fontConfig[thisTag].small.fontSize};
+      line-height: ${fontConfig[thisTag].small.lineHeight};
+
+      // Medium breakpoint ("tablet") 
+      @media ${theme.breakpoints2026('M')} {
+        font-size: ${fontConfig[thisTag].medium.fontSize};
+        line-height: ${fontConfig[thisTag].medium.lineHeight};
+      }
+
+      // L & XL breakpoints ("desktop") 
+      @media ${theme.breakpoints2026('L')} {
+        font-size: ${fontConfig[thisTag].large.fontSize};
+        line-height: ${fontConfig[thisTag].large.lineHeight};
+      }
+    `;
+  }
+  return null;
+};

package/src/theme/shared/global.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Anton%7CMontserrat:500,700,800&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Anton%7CMontserrat:400,700&display=swap');
 
 @font-face {
   font-family: 'Founders-GroteskXCondensed-Bold';
@@ -66,6 +66,8 @@ button {
 }
 
 h2 {
+  text-transform: uppercase;
+  font-family: 'Anton', Impact, sans-serif;
   margin-bottom: 2rem;
 }