@comicrelief/component-library 8.42.0 → 8.44.0

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

@@ -24,35 +24,63 @@ it('renders correctly', () => {
   })).toJSON();
   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 {
@@ -84,7 +112,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 {
@@ -126,7 +162,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 {
@@ -140,7 +176,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;
@@ -155,7 +191,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;
@@ -337,6 +373,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) {
 
     }
@@ -436,7 +542,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>
@@ -457,7 +562,6 @@ it('renders correctly', () => {
                 <h3
                   className="c12"
                   color="inherit"
-                  size="s"
                 >
                   Choose your monthly donation
                 </h3>
@@ -477,7 +581,6 @@ it('renders correctly', () => {
                         "__html": "",
                       }
                     }
-                    size="s"
                   />
                   <div
                     className="c17"
@@ -515,7 +618,6 @@ it('renders correctly', () => {
                         "__html": "",
                       }
                     }
-                    size="s"
                   />
                   <div
                     className="c17"
@@ -553,7 +655,6 @@ it('renders correctly', () => {
                         "__html": "",
                       }
                     }
-                    size="s"
                   />
                   <div
                     className="c17"
@@ -602,7 +703,6 @@ it('renders correctly', () => {
                         "__html": "£",
                       }
                     }
-                    size="s"
                   />
                   <div
                     className="c17"

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

@@ -12,7 +12,7 @@ var _Input = _interopRequireDefault(require("../../../Atoms/Input/Input"));
 const MoneyBox = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "MoneyBox",
   componentId: "sc-18hf1f8-0"
-})(["display:block;input{border:2px solid ", ";font-size:", ";font-weight:800;letter-spacing:-2px;height:auto;", "}"], _ref => {
+})(["display:block;input{border:2px solid ", ";font-size:", ";font-weight:700;letter-spacing:-2px;height:auto;", "}"], _ref => {
   let {
     theme
   } = _ref;

package/dist/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/dist/theme/crTheme/fontConfig.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.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/dist/theme/crTheme/fontHelper.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _fontConfig = _interopRequireDefault(require("./fontConfig"));
+var _default = (theme, thisTag) => {
+  // Check we've got a match, just in case:
+  if (Object.keys(_fontConfig.default).includes(thisTag)) {
+    return `
+      // General styles:
+      font-family: ${theme.fontFamilies(_fontConfig.default[thisTag].family)};
+      font-weight: ${_fontConfig.default[thisTag].weight};
+      text-transform: ${_fontConfig.default[thisTag].transform};
+      letter-spacing: 0;
+
+      // XS and S breakpoint ("mobile") 
+      font-size: ${_fontConfig.default[thisTag].small.fontSize};
+      line-height: ${_fontConfig.default[thisTag].small.lineHeight};
+
+      // Medium breakpoint ("tablet") 
+      @media ${theme.breakpoints2026('M')} {
+        font-size: ${_fontConfig.default[thisTag].medium.fontSize};
+        line-height: ${_fontConfig.default[thisTag].medium.lineHeight};
+      }
+
+      // L & XL breakpoints ("desktop") 
+      @media ${theme.breakpoints2026('L')} {
+        font-size: ${_fontConfig.default[thisTag].large.fontSize};
+        line-height: ${_fontConfig.default[thisTag].large.lineHeight};
+      }
+    `;
+  }
+  return null;
+};
+exports.default = _default;

package/dist/theme/shared/breakpoints2026.js

@@ -4,13 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.breakpointValues2026 = void 0;
+/**
+ * Example Usage
+
+Make height: 200px from 1024px onwards:
+
+@media ${({ theme }) => theme.breakpoints2026('L')} {
+  height: 200px;
+}
+
+*/
+
 const breakpointValues2026 = exports.breakpointValues2026 = {
   XS: 0,
   S: 320,
   M: 740,
   L: 1024,
-  Nav: 1150,
-  NavWide: 1350,
   XL: 1440
 };
 var _default = size => {

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

package/package.json

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