@comicrelief/component-library 8.45.0 → 8.47.0

package/dist/components/Molecules/HeroBanner/_variants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const variants = {
+  FULL_HEIGHT: 'full_height_media',
+  HALF_HEIGHT: 'half_height_media',
+  TEXT_BANNER: 'text_banner'
+};
+var _default = exports.default = variants;

package/dist/components/Molecules/HeroBanner/assets/Pause--black.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C10.8954 6 10 6.89543 10 8V40C10 41.1046 10.8954 42 12 42H17C18.1046 42 19 41.1046 19 40V8C19 6.89543 18.1046 6 17 6H12ZM31 6C29.8954 6 29 6.89543 29 8V40C29 41.1046 29.8954 42 31 42H36C37.1046 42 38 41.1046 38 40V8C38 6.89543 37.1046 6 36 6H31Z" fill="#222222"/>
+</svg>

package/dist/components/Molecules/HeroBanner/assets/Pause--white.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C10.8954 6 10 6.89543 10 8V40C10 41.1046 10.8954 42 12 42H17C18.1046 42 19 41.1046 19 40V8C19 6.89543 18.1046 6 17 6H12ZM31 6C29.8954 6 29 6.89543 29 8V40C29 41.1046 29.8954 42 31 42H36C37.1046 42 38 41.1046 38 40V8C38 6.89543 37.1046 6 36 6H31Z" fill="#FFFFFF"/>
+</svg>

package/dist/components/Molecules/HeroBanner/assets/Play--black.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.6845 22.5846L11.457 6.22056C10.9505 5.92706 10.326 5.92656 9.819 6.21856C9.3125 6.51056 9 7.05156 9 7.63656V40.3641C9 40.9491 9.3125 41.4901 9.8195 41.7821C10.0725 41.9276 10.3545 42.0001 10.6365 42.0001C10.92 42.0001 11.2035 41.9266 11.4575 41.7796L39.685 25.4161C40.189 25.1231 40.5 24.5836 40.5 24.0001C40.5 23.4166 40.189 22.8771 39.6845 22.5846Z" fill="#222222"/>
+</svg>

package/dist/components/Molecules/HeroBanner/assets/Play--white.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.6845 22.5846L11.457 6.22056C10.9505 5.92706 10.326 5.92656 9.819 6.21856C9.3125 6.51056 9 7.05156 9 7.63656V40.3641C9 40.9491 9.3125 41.4901 9.8195 41.7821C10.0725 41.9276 10.3545 42.0001 10.6365 42.0001C10.92 42.0001 11.2035 41.9266 11.4575 41.7796L39.685 25.4161C40.189 25.1231 40.5 24.5836 40.5 24.0001C40.5 23.4166 40.189 22.8771 39.6845 22.5846Z" fill="#FFFFFF"/>
+</svg>

package/dist/components/Molecules/HeroBanner/assets/alt_cta_underline.svg

@@ -0,0 +1,3 @@
+<svg width="198" height="4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8487 0.0995634C18.4146 -0.0553036 21.4342 0.00794268 23.0951 0.0426774C23.1256 0.0432472 23.156 0.0438168 23.1865 0.0443864C23.5807 0.0526142 23.9536 0.0547516 24.3905 0.0570819C25.4322 0.0626388 26.8397 0.0701852 29.7773 0.1689C30.632 0.165263 31.4869 0.163285 32.3416 0.163285C41.572 0.163287 50.8024 0.29205 60.0328 0.446249C60.1494 0.445454 60.268 0.444635 60.3878 0.443808C62.7029 0.427827 65.5737 0.408052 67.3774 0.46456C69.6707 0.536405 71.2283 0.603072 72.5075 0.660609C79.839 0.784683 87.1706 0.895552 94.5021 0.941376C96.7999 0.955737 99.098 0.963592 101.396 0.963593C103.512 0.963593 105.628 0.958676 107.744 0.949433C108.977 0.915729 110.148 0.875687 111.235 0.838591C112.761 0.786463 114.12 0.74017 115.243 0.725063C117.948 0.68867 121.016 0.74611 123.295 0.788785C123.667 0.795759 124.019 0.802363 124.344 0.808073C126.153 0.786935 127.963 0.764306 129.773 0.741177C129.894 0.754045 130.015 0.767463 130.139 0.781217C131.684 0.952869 133.582 0.950669 136.571 0.947479C137.872 0.946091 139.38 0.944586 141.156 0.957001C142.3 0.965001 142.888 1.03306 143.368 1.0886C143.51 1.10493 143.642 1.1202 143.776 1.13254C144.236 1.17481 144.721 1.12913 145.293 1.07517C146.036 1.00516 146.926 0.92108 148.103 0.997041C151.854 1.23908 153.506 1.07487 154.756 0.950654C155.123 0.914216 155.455 0.881293 155.796 0.863005C156.899 0.803725 158.471 0.86246 159.659 0.943085C160.601 1.00702 162.486 0.943636 163.915 0.863005C164.456 0.832517 165.186 0.831751 166.047 0.831022C166.938 0.830269 167.969 0.829583 169.072 0.795377C171.858 0.708937 173.339 0.66704 174.529 0.633509C174.869 0.623949 175.185 0.615244 175.501 0.606165C176.499 0.577475 177.737 0.553839 178.991 0.529991C180.492 0.501453 182.015 0.472475 183.173 0.433798C186.177 0.47473 189.18 0.525369 192.183 0.575891C193.726 0.60212 195.206 0.749846 196.297 0.993379C197.387 1.23711 198 1.55491 198 1.88426C198 2.21363 197.387 2.53141 196.297 2.77515C195.206 3.01868 193.726 3.16665 192.183 3.19288C189.076 3.24516 185.968 3.29747 182.86 3.33913C179.074 3.38986 175.288 3.42482 171.502 3.42482C168.854 3.42482 166.205 3.41697 163.557 3.40285C163.284 3.40139 163.012 3.39979 162.739 3.39821C160.514 3.47931 158.294 3.55307 156.729 3.57936C155.437 3.60107 154.496 3.55779 153.689 3.52077C153.134 3.49529 152.643 3.47275 152.146 3.47634C151.879 3.47826 151.514 3.48327 151.075 3.48928C149.28 3.51382 146.231 3.55547 143.45 3.47634C142.216 3.44122 140.782 3.37201 139.414 3.30592C137.457 3.21143 135.632 3.12335 134.71 3.1504C133.092 3.19794 131.237 3.1577 129.598 3.12208C128.034 3.0881 126.666 3.05843 125.888 3.11329C124.959 3.17888 124.166 3.15214 122.988 3.11256C122.171 3.0851 121.168 3.05159 119.804 3.03809C118.23 3.02252 117.117 2.97657 116.17 2.93751C114.838 2.88252 113.836 2.84119 112.343 2.91724C110.683 3.00174 108.949 3.05551 107.583 3.02882C106.961 3.01666 106.25 3.01961 105.509 3.02271C104.529 3.02682 103.498 3.03106 102.557 3.00074C101.781 2.97575 101.14 2.91181 100.573 2.85523C100.396 2.83758 100.226 2.82073 100.061 2.80591C99.4434 2.80673 98.8255 2.80793 98.2077 2.80982C98.1076 2.82011 98.0025 2.83151 97.8927 2.84327C97.3419 2.90229 96.6646 2.97468 95.8262 3.01075C94.4992 3.06783 93.3347 3.03209 92.1063 2.99415C91.1499 2.96461 90.1548 2.93378 89.014 2.94483C88.2362 2.95237 87.3504 2.97851 86.4724 3.0044C85.1684 3.04286 83.8806 3.0807 82.9859 3.05665C82.6507 3.04763 82.3625 3.00748 82.0773 2.96754C82.076 2.96729 82.0748 2.96705 82.0735 2.9668C82.0541 2.96409 82.0347 2.96145 82.0153 2.95875C79.8363 2.98934 77.6571 3.02307 75.4781 3.0586C75.2893 3.06892 75.0985 3.0791 74.9094 3.08912C73.9854 3.13809 73.0876 3.18565 72.5022 3.25319C71.8678 3.32639 70.2728 3.36896 68.592 3.41383C67.4913 3.44322 66.3532 3.47357 65.4242 3.51418C64.8811 3.53791 64.3659 3.49654 63.8358 3.45387C63.3412 3.41407 62.8334 3.37322 62.2783 3.38332C62.0003 3.38838 61.7 3.40552 61.3795 3.42384C61.0974 3.43998 60.7991 3.45707 60.4867 3.46755C60.1965 3.47725 59.5503 3.45471 58.7216 3.42604C58.2095 3.40832 57.6276 3.38831 57.0168 3.37184C55.4026 3.39762 53.788 3.42235 52.1738 3.44533C51.837 3.4816 51.5448 3.52869 51.3135 3.58913C51.1475 3.6325 51.0062 3.68433 50.8611 3.73733C50.6636 3.80944 50.4592 3.88396 50.1775 3.94339C49.9574 3.98982 49.6977 4.00832 49.5234 3.98904C49.4422 3.98005 49.3799 3.9631 49.3233 3.94778C49.2584 3.93023 49.2006 3.91462 49.1299 3.91506C49.079 3.91542 49.0259 3.92785 48.9607 3.9429C48.8566 3.96693 48.7211 3.99795 48.5151 3.99905C47.7482 4.00315 46.8765 3.99323 46.0226 3.98343C45.073 3.97253 44.1448 3.96196 43.4054 3.97122C42.577 3.9816 41.3966 3.93545 40.2142 3.88943C39.3894 3.85733 38.5633 3.82539 37.8546 3.81228C37.1602 3.79944 36.437 3.82497 35.7367 3.84988C34.8962 3.87978 34.0877 3.90866 33.4006 3.86819C33.2616 3.85997 33.0891 3.80993 32.8726 3.74734C32.7192 3.70297 32.5426 3.65225 32.3416 3.60549C31.467 3.60549 30.5923 3.60343 29.7177 3.59963C29.6869 3.60642 29.6551 3.61333 29.6233 3.62038C29.6228 3.62054 29.6223 3.62071 29.6217 3.62087C28.9034 3.78008 27.9204 3.99786 26.5393 3.86794C26.1883 3.83492 25.9673 3.77392 25.7682 3.71902C25.5726 3.6651 25.3978 3.61685 25.142 3.60671C24.8514 3.59522 24.5084 3.62833 24.1344 3.66433C23.6093 3.71488 23.0228 3.77136 22.4342 3.71877C22.394 3.71518 22.3508 3.71124 22.3058 3.7073C21.8792 3.66989 21.2477 3.61455 20.6192 3.50319C18.7547 3.47346 16.8899 3.43865 15.0254 3.40065C11.9174 3.3373 8.80877 3.26507 5.70108 3.19288C4.18915 3.15735 2.73913 3.0057 1.66999 2.76294C0.600791 2.51984 0 2.20742 0 1.88426C8.923e-05 1.56114 0.600871 1.24891 1.66999 1.00583C2.73913 0.763056 4.18909 0.611426 5.70108 0.575891C8.16655 0.518618 10.6328 0.461263 13.0986 0.408407C13.2278 0.401696 13.3576 0.395205 13.4868 0.389119C14.448 0.343838 15.3399 0.252889 16.2324 0.16182C16.4374 0.140902 16.6428 0.119938 16.8487 0.0995634Z" fill="#E52630"/>
+</svg>

package/dist/components/Molecules/HeroBanner/assets/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3208 7.46263C14.3183 7.4653 14.3167 7.46863 14.314 7.4713L9.22291 12.8047C9.09865 12.9348 8.9359 13 8.77299 13C8.61007 13 8.44732 12.9348 8.3229 12.8048C8.0744 12.5445 8.0744 12.1223 8.3229 11.862L12.3277 7.66663H1.13638C0.784941 7.66663 0.5 7.36813 0.5 6.99996C0.5 6.63179 0.784941 6.33329 1.13638 6.33329H12.3277L8.3229 2.13809C8.0744 1.87776 8.0744 1.45559 8.3229 1.19525C8.57141 0.934916 8.9744 0.934916 9.22291 1.19525L14.314 6.52862C14.3165 6.53129 14.3183 6.53462 14.3208 6.53729C14.3474 6.56596 14.3719 6.59679 14.3932 6.63012C14.4042 6.64746 14.412 6.66612 14.4212 6.68429C14.4315 6.70446 14.4432 6.72362 14.4516 6.74496C14.4607 6.76779 14.4659 6.79146 14.4723 6.81496C14.4774 6.83312 14.4841 6.85062 14.4877 6.86946C14.5041 6.95579 14.5041 7.04463 14.4877 7.13079C14.4841 7.14963 14.4774 7.16696 14.4723 7.18529C14.4658 7.20879 14.4605 7.23246 14.4516 7.25529C14.4432 7.27663 14.4315 7.29579 14.4212 7.31596C14.4118 7.33413 14.4042 7.35279 14.3932 7.37013C14.3719 7.4033 14.3474 7.43396 14.3208 7.46263Z" fill="white" stroke="white"/>
+</svg>

package/dist/components/Molecules/HeroBanner/assets/loader.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="200px" height="200px" viewBox="0 0 128 128" xml:space="preserve"><g><circle cx="16" cy="64" r="16" fill="#000"/><circle cx="16" cy="64" r="16" fill="#555" transform="rotate(45,64,64)"/><circle cx="16" cy="64" r="16" fill="#949494" transform="rotate(90,64,64)"/><circle cx="16" cy="64" r="16" fill="#ccc" transform="rotate(135,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" transform="rotate(180,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" transform="rotate(225,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" transform="rotate(270,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" transform="rotate(315,64,64)"/><animateTransform attributeName="transform" type="rotate" values="0 64 64;315 64 64;270 64 64;225 64 64;180 64 64;135 64 64;90 64 64;45 64 64" calcMode="discrete" dur="720ms" repeatCount="indefinite"></animateTransform></g></svg>

package/dist/components/Molecules/HeroBanner/assets/video--play-icon.svg

@@ -0,0 +1 @@
+<svg id="play_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>.st0{fill:#2c0230}.st1{fill:#fff}</style><circle class="st0" cx="50" cy="50" r="50" id="bg"/><path id="play" class="st1" d="M37 35v30l29-15z"/></svg>

package/dist/components/Molecules/HeroBanner/assets/video--play-icon__hover.svg

@@ -0,0 +1 @@
+<svg id="play_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>.st0{fill:#fff}.st1{fill:#2c0230}</style><circle class="st0" cx="50" cy="50" r="50" id="bg"/><path class="st1" d="M37 35v30l29-15z" id="play"/></svg>

package/dist/components/Molecules/HeroBanner/local-preview-layout-fixes.css

@@ -0,0 +1,6 @@
+.rsg--content-3 {
+    padding: 0;
+    div[data-preview="HeroBanner"]{
+        padding: 0;
+    }
+}

package/dist/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -75,7 +75,6 @@ exports[`renders Promo correctly 1`] = `
   padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: 700;
   font-size: 1rem;
   border-radius: 2rem;
   -webkit-transition: all 0.3s;
@@ -91,6 +90,16 @@ exports[`renders Promo correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   cursor: pointer;
+  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;
+  font-weight: 700;
   background-color: #FFFFFF;
   color: #000000;
 }
@@ -208,6 +217,20 @@ exports[`renders Promo correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c9 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c9 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c9 {
     width: auto;
@@ -401,7 +424,6 @@ exports[`renders Promo correctly end position 1`] = `
   padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: 700;
   font-size: 1rem;
   border-radius: 2rem;
   -webkit-transition: all 0.3s;
@@ -417,6 +439,16 @@ exports[`renders Promo correctly end position 1`] = `
   -ms-flex-align: center;
   align-items: center;
   cursor: pointer;
+  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;
+  font-weight: 700;
   background-color: #FFFFFF;
   color: #000000;
 }
@@ -537,6 +569,20 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c9 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c9 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c9 {
     width: auto;

package/dist/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap

@@ -267,7 +267,6 @@ exports[`renders Single Message with Image correctly 1`] = `
   padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: 700;
   font-size: 1rem;
   border-radius: 2rem;
   -webkit-transition: all 0.3s;
@@ -283,6 +282,16 @@ exports[`renders Single Message with Image correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   cursor: pointer;
+  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;
+  font-weight: 700;
   background-color: #FFFFFF;
   color: #000000;
 }
@@ -361,6 +370,20 @@ exports[`renders Single Message with Image correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c8 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -804,7 +827,6 @@ exports[`renders Single Message with full width correctly 1`] = `
   padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: 700;
   font-size: 1rem;
   border-radius: 2rem;
   -webkit-transition: all 0.3s;
@@ -820,6 +842,16 @@ exports[`renders Single Message with full width correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   cursor: pointer;
+  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;
+  font-weight: 700;
   background-color: #FFFFFF;
   color: #000000;
 }
@@ -898,6 +930,20 @@ exports[`renders Single Message with full width correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c8 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -1106,6 +1152,14 @@ exports[`renders Single Message with full width image and no text correctly 1`]
 
 }
 
+@media (min-width:740px) {
+
+}
+
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -1260,6 +1314,14 @@ exports[`renders Single Message with no Image correctly 1`] = `
 
 }
 
+@media (min-width:740px) {
+
+}
+
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;

package/dist/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -83,7 +83,6 @@ exports[`renders correctly 1`] = `
   padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: 700;
   font-size: 1rem;
   border-radius: 2rem;
   -webkit-transition: all 0.3s;
@@ -99,6 +98,16 @@ exports[`renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   cursor: pointer;
+  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;
+  font-weight: 700;
   background-color: #2042AD;
   color: #FFFFFF;
 }
@@ -218,6 +227,20 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c11 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c11 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c11 {
     width: auto;

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

@@ -62,7 +62,6 @@ it('renders correctly', () => {
       padding: 0.5rem 1.25rem;
       -webkit-text-decoration: none;
       text-decoration: none;
-      font-weight: 700;
       font-size: 1rem;
       border-radius: 2rem;
       -webkit-transition: all 0.3s;
@@ -78,6 +77,16 @@ it('renders correctly', () => {
       -ms-flex-align: center;
       align-items: center;
       cursor: pointer;
+      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;
+      font-weight: 700;
       background-color: #FFFFFF;
       color: #000000;
     }
@@ -136,6 +145,20 @@ it('renders correctly', () => {
       }
     }
 
+    @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:740px) {
       .c5 {
         width: auto;

package/dist/index.js

@@ -465,7 +465,6 @@ var _ButtonWithStates = _interopRequireDefault(require("./components/Atoms/Butto
 var _Confetti = _interopRequireDefault(require("./components/Atoms/Confetti/Confetti"));
 var _External = _interopRequireDefault(require("./components/Atoms/Icons/External"));
 var _Internal = _interopRequireDefault(require("./components/Atoms/Icons/Internal"));
-var _HeroBanner = _interopRequireDefault(require("./components/Molecules/HeroBanner/HeroBanner"));
 var _InfoBanner = _interopRequireDefault(require("./components/Molecules/InfoBanner/InfoBanner"));
 var _SingleMessage = _interopRequireDefault(require("./components/Molecules/SingleMessage/SingleMessage"));
 var _Card = _interopRequireDefault(require("./components/Molecules/Card/Card"));
@@ -496,6 +495,7 @@ var _Descriptor = _interopRequireDefault(require("./components/Molecules/Descrip
 var _Lookup = _interopRequireDefault(require("./components/Molecules/Lookup/Lookup"));
 var _SimpleSchoolLookup = _interopRequireDefault(require("./components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup"));
 var _LogoLinked = _interopRequireDefault(require("./components/Molecules/LogoLinked/LogoLinked"));
+var _HeroBanner = _interopRequireDefault(require("./components/Molecules/HeroBanner/HeroBanner"));
 var _EmailSignUp = require("./components/Organisms/EmailSignUp/_EmailSignUp");
 var _CookieBanner = _interopRequireDefault(require("./components/Organisms/CookieBanner/CookieBanner"));
 var _Membership = _interopRequireDefault(require("./components/Organisms/Membership/Membership"));

package/dist/styleguide/data/data.js

@@ -14,6 +14,7 @@ const defaultData = exports.defaultData = {
   },
   ctaText: 'Find out how',
   promoImage: '../promo.jpg',
+  heroBannerImage: '../PromoLW.jpg',
   imageLow: 'http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=100&h=50&q=100',
   image: 'http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg',
   images: '//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w'

package/dist/theme/shared/animations.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.springScaleAnimation = exports.logoRotateAnimation = void 0;
+exports.springScaleAnimation = exports.logoRotateAnimation = exports.bounceUpAnimation = void 0;
 var _styledComponents = require("styled-components");
 /**
  * Logo rotation animation on hover
@@ -43,4 +43,25 @@ const springScaleAnimation = function (animateScale) {
   const duration = 0.2 + bounceIntensity * 0.1;
   return (0, _styledComponents.css)(["transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");transform-origin:center;&:hover,&:focus{transform:scale(", ");}"], duration, pullBack, overshoot, scaleFactor);
 };
-exports.springScaleAnimation = springScaleAnimation;
+
+/**
+ * bounceUpAnimation animation on hover
+ * Applies a smooth spring-like position transition that moves the element up on hover/focus
+ * @param {boolean} animateScale - Whether to enable the scale animation
+ * @param {number} pixelMovement - Amount of movement to apply on hover
+ * @param {number} bounceIntensity - Intensity of the springy bounce effect (0-3, default: 1)
+ * @returns {css} template literal for the animation
+ */
+exports.springScaleAnimation = springScaleAnimation;
+const bounceUpAnimation = function (animateScale) {
+  let pixelMovement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+  let bounceIntensity = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  if (!animateScale) {
+    return (0, _styledComponents.css)([""]);
+  }
+  const pullBack = -0.55 - bounceIntensity * 0.3;
+  const overshoot = 1.55 + bounceIntensity * 0.4;
+  const duration = 0.2 + bounceIntensity * 0.1;
+  return (0, _styledComponents.css)(["transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");transform-origin:center;&:hover,&:focus{transform:translateY(-", "px);}"], duration, pullBack, overshoot, pixelMovement);
+};
+exports.bounceUpAnimation = bounceUpAnimation;

package/dist/theme/shared/global.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Anton%7CMontserrat:400,700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Anton%7CMontserrat:400,500,600,700&display=swap');
 
 @font-face {
   font-family: 'Founders-GroteskXCondensed-Bold';

package/package.json

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

package/src/components/Atoms/Icons/CtaArrow.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { withTheme } from 'styled-components';
+
+const angle = {
+  right: '0',
+  left: '180deg',
+  down: '90deg',
+  up: '-90deg'
+};
+
+// The size the icon was rendered at, defining the path coordinates:
+const defaultSize = 32;
+
+const Icon = styled.svg`
+  transform: ${({ direction }) => `rotate(${angle[direction]})`};
+
+  rect {
+    fill: ${({ theme, colour }) => (theme.color(colour))};
+  }
+
+  path {
+    fill: ${({ theme }) => (theme.color('white'))};
+    stroke: ${({ theme }) => (theme.color('white'))};
+    transform: scale(${({ width }) => (width / defaultSize)});
+  }
+`;
+
+const CtaArrow = ({
+  colour = 'red', theme, size = defaultSize, direction = 'right', ...rest
+}) => (
+
+  <Icon
+    width={size}
+    height={size}
+    viewBox={`0 0 ${size} ${size}`}
+    direction={direction}
+    colour={colour}
+    xmlns="http://www.w3.org/2000/svg"
+    defaultSize={defaultSize}
+    {...rest}
+  >
+    <rect width={size} height={size} rx={size / 2} />
+    <path d="M22.8208 16.4626C22.8183 16.4653 22.8167 16.4686 22.814 16.4713L17.7229 21.8047C17.5987 21.9348 17.4359 22 17.273 22C17.1101 22 16.9473 21.9348 16.8229 21.8048C16.5744 21.5445 16.5744 21.1223 16.8229 20.862L20.8277 16.6666H9.63638C9.28494 16.6666 9 16.3681 9 16C9 15.6318 9.28494 15.3333 9.63638 15.3333H20.8277L16.8229 11.1381C16.5744 10.8778 16.5744 10.4556 16.8229 10.1953C17.0714 9.93492 17.4744 9.93492 17.7229 10.1953L22.814 15.5286C22.8165 15.5313 22.8183 15.5346 22.8208 15.5373C22.8474 15.566 22.8719 15.5968 22.8932 15.6301C22.9042 15.6475 22.912 15.6661 22.9212 15.6843C22.9315 15.7045 22.9432 15.7236 22.9516 15.745C22.9607 15.7678 22.9659 15.7915 22.9723 15.815C22.9774 15.8331 22.9841 15.8506 22.9877 15.8695C23.0041 15.9558 23.0041 16.0446 22.9877 16.1308C22.9841 16.1496 22.9774 16.167 22.9723 16.1853C22.9658 16.2088 22.9605 16.2325 22.9516 16.2553C22.9432 16.2766 22.9315 16.2958 22.9212 16.316C22.9118 16.3341 22.9042 16.3528 22.8932 16.3701C22.8719 16.4033 22.8474 16.434 22.8208 16.4626Z" />
+  </Icon>
+);
+
+CtaArrow.propTypes = {
+  colour: PropTypes.string,
+  size: PropTypes.number,
+  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+  theme: PropTypes.objectOf(PropTypes.shape).isRequired
+};
+
+export default withTheme(CtaArrow);

package/src/components/Atoms/Icons/index.js

@@ -5,3 +5,4 @@ export { default as Internal } from './Internal';
 export { default as Chevron } from './Chevron';
 export { default as Arrow } from './Arrow';
 export { default as AtSign } from './AtSign';
+export { default as CtaArrow } from './CtaArrow';

package/src/components/Atoms/Link/Link.js

@@ -74,7 +74,7 @@ const Link = ({
 
 Link.propTypes = {
   /** Link styling. See linkStyles in theme. */
-  type: PropTypes.oneOf(['button', 'standard', 'standard_white']),
+  type: PropTypes.oneOf(['button', 'standard', 'standard_white', 'alt']), // TODO: alt styles based on Hero Banner
   /** Color for button style link. See buttonColors in theme */
   color: PropTypes.string,
   mobileColour: PropTypes.string,

package/src/components/Atoms/Link/Link.style.js

@@ -1,13 +1,13 @@
 import styled, { css } from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
 import hideVisually from '../../../theme/shared/hideVisually';
+import fontHelper from '../../../theme/crTheme/fontHelper';
 
 const buttonStyle = () => css`
   display: inline-flex;
   position: relative;
   padding: 0.5rem 1.25rem;
   text-decoration: none;
-  font-weight: 700;
   font-size: ${({ theme }) => theme.fontSize('s')};
   border-radius: 2rem;
   transition: all 0.3s;
@@ -16,6 +16,13 @@ const buttonStyle = () => css`
   justify-content: center;
   align-items: center;
   cursor: pointer;
+
+  ${({ theme }) => css`
+    ${fontHelper(theme, 'button')}
+  `}
+
+  font-weight: 700;
+
   ${({ color, theme }) => (color ? theme.buttonColors(color) : theme.buttonColors('red'))};
 
   // Override with mobile-specific colours where available:

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

@@ -203,7 +203,6 @@ it('renders link styled as button correctly', () => {
       padding: 0.5rem 1.25rem;
       -webkit-text-decoration: none;
       text-decoration: none;
-      font-weight: 700;
       font-size: 1rem;
       border-radius: 2rem;
       -webkit-transition: all 0.3s;
@@ -219,6 +218,16 @@ it('renders link styled as button correctly', () => {
       -ms-flex-align: center;
       align-items: center;
       cursor: pointer;
+      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;
+      font-weight: 700;
       background-color: #FFE400;
       color: #000000;
     }
@@ -228,6 +237,20 @@ it('renders link styled as button correctly', () => {
       color: #000000;
     }
 
+    @media (min-width:740px) {
+      .c0 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c0 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
     @media (min-width:740px) {
       .c0 {
         width: auto;