@comicrelief/component-library 8.48.1 → 8.49.0

package/dist/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap

@@ -49,15 +49,11 @@ exports[`renders correctly 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
-  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;
-  transition: all 0.3s;
-  height: 3.125rem;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  min-height: 2.5rem;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -69,8 +65,19 @@ exports[`renders correctly 1`] = `
   align-items: center;
   border: none;
   cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
   background-color: #E52630;
   color: #FFFFFF;
+  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: 1rem;
+  line-height: 1.25rem;
 }
 
 .c15 > a {
@@ -78,9 +85,17 @@ exports[`renders correctly 1`] = `
   text-decoration: none;
 }
 
-.c15:hover {
+.c15:hover,
+.c15:focus,
+.c15:focus-within,
+.c15:focus-visible {
   background-color: #890B11;
-  color: #FFFFFF;
+  outline-offset: 3px;
+}
+
+.c15:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c8 {
@@ -161,7 +176,7 @@ exports[`renders correctly 1`] = `
 
 .c16:disabled {
   cursor: not-allowed;
-  opacity: 0.75;
+  opacity: 0.5;
 }
 
 .c0 {
@@ -278,6 +293,20 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c15 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c15 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c15 {
     width: auto;
@@ -287,8 +316,6 @@ exports[`renders correctly 1`] = `
 @media (min-width:1024px) {
   .c15 {
     width: auto;
-    padding: 1rem 2rem;
-    margin: 0 auto 2rem;
   }
 }
 
@@ -478,15 +505,12 @@ exports[`renders correctly 1`] = `
       >
         <button
           className="c15 c16"
+          color="red"
           data-test="subscribe-button"
           disabled={true}
           type="submit"
         >
-          <span
-            className="c4"
-          >
-            Subscribe
-          </span>
+          Subscribe
           <div
             className=""
           />

package/dist/components/Organisms/FooterNew/__snapshots__/FooterNew.test.js.snap

@@ -66,15 +66,11 @@ exports[`renders correctly 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
-  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;
-  transition: all 0.3s;
-  height: 3.125rem;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  min-height: 2.5rem;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -86,8 +82,19 @@ exports[`renders correctly 1`] = `
   align-items: center;
   border: none;
   cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
   background-color: #FFFFFF;
   color: #000000;
+  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: 1rem;
+  line-height: 1.25rem;
 }
 
 .c23 > a {
@@ -95,9 +102,17 @@ exports[`renders correctly 1`] = `
   text-decoration: none;
 }
 
-.c23:hover {
-  background-color: #969598;
-  color: #000000;
+.c23:hover,
+.c23:focus,
+.c23:focus-within,
+.c23:focus-visible {
+  background-color: #E1E2E3;
+  outline-offset: 3px;
+}
+
+.c23:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c15 {
@@ -788,6 +803,20 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c23 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c23 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c23 {
     width: auto;
@@ -797,8 +826,6 @@ exports[`renders correctly 1`] = `
 @media (min-width:1024px) {
   .c23 {
     width: auto;
-    padding: 1rem 2rem;
-    margin: 0 auto 2rem;
   }
 }
 

package/dist/components/Organisms/Header2025/Header2025.style.js

@@ -51,7 +51,7 @@ const Brand = exports.Brand = _styledComponents.default.div.withConfig({
 const DonateButtonWrapperTop = exports.DonateButtonWrapperTop = _styledComponents.default.div.withConfig({
   displayName: "Header2025style__DonateButtonWrapperTop",
   componentId: "sc-7gs40r-3"
-})(["width:100px;display:flex;justify-content:center;margin-left:5px;height:2.8rem;a{width:100%;height:inherit;transition:width 0.4s cubic-bezier(0.5,1.5,0.5,0.80);&:hover,&:focus{width:100%;box-shadow:rgba(0,0,0,0.1) 0 0 20px 0;}}"]);
+})(["width:100px;display:flex;justify-content:center;margin-left:5px;height:2.8rem;a{width:100%;height:inherit;transition:all 0.3s cubic-bezier(0.5,1.5,0.5,0.80);&:hover,&:focus{width:100%;box-shadow:rgba(0,0,0,0.1) 0 0 20px 0;}}"]);
 const Header2025MetaIcons = exports.Header2025MetaIcons = _styledComponents.default.div.withConfig({
   displayName: "Header2025style__Header2025MetaIcons",
   componentId: "sc-7gs40r-4"

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js

@@ -305,7 +305,7 @@ const StyledText = exports.StyledText = (0, _styledComponents.default)(_Text.def
 const DonateButtonWrapperBottom = exports.DonateButtonWrapperBottom = _styledComponents.default.div.withConfig({
   displayName: "HeaderNav2025style__DonateButtonWrapperBottom",
   componentId: "sc-xflhtq-12"
-})(["display:flex;justify-content:center;padding:35px 20px;background-color:inherit;a{width:calc(100% - 10px);transition:width 0.35s cubic-bezier(0.5,1.5,0.5,0.9);&:hover,&:focus{width:100%;box-shadow:rgba(0,0,0,0.1) 0 0 20px 0;}}@media ", "{display:none;}"], _ref43 => {
+})(["display:flex;justify-content:center;padding:35px 20px;background-color:inherit;a{width:calc(100% - 10px);transition:all 0.3s cubic-bezier(0.5,1.5,0.5,0.9);&:hover,&:focus{width:100%;box-shadow:rgba(0,0,0,0.1) 0 0 20px 0;}}@media ", "{display:none;}"], _ref43 => {
   let {
     theme
   } = _ref43;

package/dist/theme/crTheme/buttonColors.js

@@ -8,161 +8,171 @@ exports.default = void 0;
 var _styledComponents = require("styled-components");
 var _colors = _interopRequireDefault(require("./colors"));
 const buttonColors = {
+  // "Primary - red"
+  red: {
+    background: (0, _colors.default)('red'),
+    textColour: (0, _colors.default)('white'),
+    hoverBackground: (0, _colors.default)('red_dark'),
+    hovertextColour: (0, _colors.default)('white')
+  },
+  // "Primary - black"
   black: {
-    background: (0, _colors.default)('black'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('grey'),
-    hoverColor: (0, _colors.default)('white')
+    background: (0, _colors.default)('grey_dark'),
+    textColour: (0, _colors.default)('white'),
+    hoverBackground: (0, _colors.default)('black'),
+    hovertextColour: (0, _colors.default)('white')
+  },
+  // "Primary - white"
+  white: {
+    background: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('black'),
+    hoverBackground: (0, _colors.default)('grey_medium'),
+    hovertextColour: (0, _colors.default)('black')
   },
+  // To be phased out:
   blue: {
     background: (0, _colors.default)('blue'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('blue_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   blue_dark: {
     background: '#2042AD',
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('blue_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   blue_light: {
     background: (0, _colors.default)('blue_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('blue_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   coral: {
     background: (0, _colors.default)('coral'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('coral_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   coral_dark: {
     background: (0, _colors.default)('coral_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('coral'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   coral_light: {
     background: (0, _colors.default)('coral_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('coral_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   green: {
     background: (0, _colors.default)('green'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('green_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   green_dark: {
     background: (0, _colors.default)('green_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('green'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   green_light: {
     background: (0, _colors.default)('green_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('green_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   grey: {
     background: (0, _colors.default)('grey'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('grey_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   grey_dark: {
     background: (0, _colors.default)('grey_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('grey'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   grey_light: {
     background: (0, _colors.default)('grey_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('grey_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   magenta: {
     background: (0, _colors.default)('magenta'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('magenta_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   magenta_dark: {
     background: (0, _colors.default)('magenta_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('magenta'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   magenta_light: {
     background: (0, _colors.default)('magenta_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('magenta_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   orange: {
     background: (0, _colors.default)('orange'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('orange_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   orange_dark: {
     background: (0, _colors.default)('orange_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('orange'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   orange_light: {
     background: (0, _colors.default)('orange_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('orange_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   purple: {
     background: (0, _colors.default)('purple'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('purple_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   purple_dark: {
     background: (0, _colors.default)('purple_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('purple'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   purple_light: {
     background: (0, _colors.default)('purple_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('purple_dark'),
-    hoverColor: (0, _colors.default)('white')
-  },
-  red: {
-    background: (0, _colors.default)('red'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('red_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   teal: {
     background: (0, _colors.default)('teal'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('teal_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   teal_dark: {
     background: (0, _colors.default)('teal_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('teal'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   teal_light: {
     background: (0, _colors.default)('teal_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('teal_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   },
   transparent: {
     background: 'rgba(255, 255, 255, 0.5)',
@@ -170,35 +180,37 @@ const buttonColors = {
     hoverBackground: 'rgba(255, 255, 255, 0.7)',
     hoverColor: 'inherit'
   },
-  white: {
-    background: (0, _colors.default)('white'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('grey'),
-    hoverColor: (0, _colors.default)('black')
-  },
   yellow: {
     background: (0, _colors.default)('yellow'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('yellow_light'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   yellow_dark: {
     background: (0, _colors.default)('yellow_dark'),
-    color: (0, _colors.default)('white'),
+    textColour: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('yellow'),
-    hoverColor: (0, _colors.default)('black')
+    hovertextColour: (0, _colors.default)('black')
   },
   yellow_light: {
     background: (0, _colors.default)('yellow_light'),
-    color: (0, _colors.default)('black'),
+    textColour: (0, _colors.default)('black'),
     hoverBackground: (0, _colors.default)('yellow_dark'),
-    hoverColor: (0, _colors.default)('white')
+    hovertextColour: (0, _colors.default)('white')
   }
 };
-var _default = colorName => {
+var _default = (colorName, buttonType) => {
   let style = 'inherit';
+
+  // Add a fallback, just in case someone is trying to use a non-existent colour:
+  const thisColourName = buttonColors[colorName] ? colorName : 'red';
   if (colorName) {
-    style = (0, _styledComponents.css)(["background-color:", ";color:", ";:hover{background-color:", ";color:", ";}"], buttonColors[colorName].background, buttonColors[colorName].color, buttonColors[colorName].hoverBackground, buttonColors[colorName].hoverColor);
+    style = (0, _styledComponents.css)(["background-color:", ";color:", ";&:hover,&:focus,&:focus-within,&:focus-visible{background-color:", ";color:", ";outline-offset:3px;}&:disabled{cursor:not-allowed;opacity:0.5;}", ";"], buttonColors[thisColourName].background, buttonColors[thisColourName].textColour, buttonColors[thisColourName].hoverBackground, buttonColors[thisColourName].hoverColor, _ref => {
+      let {
+        theme
+      } = _ref;
+      return (buttonType === theme.buttonTypes.SECONDARY || buttonType === theme.buttonTypes.TERTIARY) && (0, _styledComponents.css)(["background-color:transparent;color:", ";", ";&:hover,&:focus,&:focus-within,&:focus-visible{color:", ";background-color:transparent;", ";}"], buttonColors[thisColourName].background, buttonType === theme.buttonTypes.SECONDARY && (0, _styledComponents.css)(["box-shadow:0px 0px 0px 2px ", " inset;"], buttonColors[thisColourName].background), buttonColors[thisColourName].hoverBackground, buttonType === theme.buttonTypes.SECONDARY && (0, _styledComponents.css)(["box-shadow:0px 0px 0px 2px ", " inset;"], buttonColors[thisColourName].hoverBackground));
+    });
   }
   return style;
 };

package/dist/theme/crTheme/buttonTypes.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const buttonTypes = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary'
+};
+var _default = exports.default = buttonTypes;

package/dist/theme/crTheme/colors.js

@@ -15,7 +15,7 @@ exports.default = void 0;
  */
 
 const colors = {
-  /* CAMPAIGN COLOURS */
+  /* RND25 CAMPAIGN COLOURS */
   rnd_25_ruby_red: '#AE001B',
   rnd_25_glitzy_grape: '#A20C51',
   rnd_25_glitzy_blue: '#0F1953',
@@ -24,6 +24,18 @@ const colors = {
   rnd_25_party_pink: '#FF9DEC',
   rnd_25_party_blue: '#004EFF',
   rnd_25_party_lilac: '#B07FEA',
+  /* RND26 CAMPAIGN COLOURS */
+  rnd_26_dark_purple: '#7953E8',
+  rnd_26_deep_indigo: '#341A7E',
+  rnd_26_light_purple: '#BA9DFC',
+  rnd_26_teal: '#036D7C',
+  rnd_26_deep_teal: '#024042',
+  rnd_26_green: '#7FFB73',
+  rnd_26_magenta: '#A7268C',
+  rnd_26_deep_magenta: '#601151',
+  rnd_26_yellow: '#F8F440',
+  rnd_26_vibrant_pink: '#E948D5',
+  rnd_26_light_pink: '#FE80EB',
   /* GREYSCALE COLOURS */
   black: '#000000',
   white: '#FFFFFF',

package/dist/theme/crTheme/fontConfig.js

@@ -143,10 +143,9 @@ var _default = exports.default = {
       lineHeight: '1.375rem'
     }
   },
-  // To be used directly (not via fontHelper), but makes sense to keep here:
   button: {
     family: 'Montserrat',
-    weight: 400,
+    weight: 700,
     transform: 'inherit',
     small: {
       fontSize: '1rem',
@@ -161,8 +160,8 @@ var _default = exports.default = {
       lineHeight: '1.375rem'
     }
   },
-  // Admittedly, while the same for each breakpoint, these 2
-  // config objects made sense to keep it here all the same.
+  // Admittedly, while these values are identical for each breakpoint,
+  // it still made sense to keep it here all here for parity:
   formFieldLabel: {
     family: 'Montserrat',
     weight: 400,

package/dist/theme/crTheme/theme.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _colors = _interopRequireDefault(require("./colors"));
 var _buttonColors = _interopRequireDefault(require("./buttonColors"));
+var _buttonTypes = _interopRequireDefault(require("./buttonTypes"));
 var _linkStyles = _interopRequireDefault(require("./linkStyles"));
 var _fontSizes = _interopRequireDefault(require("./fontSizes"));
 var _allBreakpoints = _interopRequireDefault(require("../shared/allBreakpoints"));
@@ -15,6 +16,7 @@ var _fontFamilies = _interopRequireDefault(require("../shared/fontFamilies"));
 var _default = exports.default = {
   color: _colors.default,
   buttonColors: _buttonColors.default,
+  buttonTypes: _buttonTypes.default,
   linkStyles: _linkStyles.default,
   fontSize: _fontSizes.default,
   allBreakpoints: _allBreakpoints.default,

package/package.json

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

package/playwright/components/organisms/emailSignUpForm.spec.js

@@ -101,7 +101,7 @@ test.describe('Email Signup Form component', () => {
     await page.locator('[data-testid="EmailSignUpForm-example-1"] #email').type('email-signup@email.sls.comicrelief.com');
 
     // submit the ESU form
-    await page.locator('[data-testid="EmailSignUpForm-example-1"] button[type="submit"] > span').click();
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] button[type="submit"]').click();
 
     await page.close();
   });