@comicrelief/component-library 6.10.0 → 7.0.1

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

@@ -1,1211 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly with error message 1`] = `
-.c6 {
-  font-size: 3rem;
-  line-height: 3rem;
-  text-transform: uppercase;
-  font-weight: 400;
-  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;
-}
-
-.c13 {
-  font-size: 1rem;
-  line-height: 1rem;
-  text-transform: inherit;
-  line-height: normal;
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-}
-
-.c17 {
-  color: #E52630;
-  text-transform: inherit;
-  font-weight: bold;
-  line-height: normal;
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-}
-
-.c11 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  color: #5C5C5E;
-  width: 100%;
-}
-
-.c14 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.c18 {
-  display: inline-block;
-  padding: 1.5rem 1rem 1rem;
-  width: 100%;
-  z-index: 1;
-  margin-top: -10px;
-  background-color: #FAE1E2;
-  border-radius: 0.5rem;
-  font-weight: bold;
-}
-
-.c18:before {
-  position: relative;
-  content: '';
-  top: 1px;
-  margin-right: 3px;
-  background: url(mock.asset) left 0/100% no-repeat;
-  width: 18px;
-  height: 19px;
-  display: inline-block;
-  vertical-align: top;
-  color: #E52630;
-}
-
-.c16 {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 48px;
-  padding: 1rem 1.5rem;
-  background-color: #F4F3F5;
-  border: 1px solid;
-  border-color: #E52630;
-  box-shadow: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  color: #000000;
-  border-radius: 0.5rem;
-  font-size: inherit;
-  z-index: 2;
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-}
-
-.c16:focus {
-  border: 1px solid #666;
-}
-
-.c15 {
-  position: relative;
-  font-size: 1.25rem;
-}
-
-.c9 {
-  text-align: left;
-}
-
-.c1 {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  display: block;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-
-.c1:hover,
-.c1:focus {
-  opacity: 0.6;
-}
-
-.c2 {
-  width: 100%;
-}
-
-.c23 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-size: 1rem;
-  color: #FFFFFF;
-  background-color: #2C0230;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-bottom: 1rem;
-}
-
-.c19 {
-  margin-top: 1rem;
-}
-
-.c19 input {
-  text-align: center;
-  width: 100%;
-  font-size: 1rem;
-}
-
-.c21 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-top: 1rem;
-}
-
-.c21 p {
-  font-size: 1rem;
-  line-height: 2rem;
-}
-
-.c21 p a {
-  font-size: 1rem;
-  color: #FFFFFF;
-}
-
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin: 1rem 0;
-}
-
-.c12 {
-  width: 100%;
-}
-
-.c7 {
-  margin-bottom: 1.5rem;
-}
-
-.c20 {
-  width: 100%;
-  color: #FFFFFF;
-  font-size: 1rem;
-  font-weight: bold;
-  cursor: pointer;
-  padding: 1rem 0.5rem;
-  background: #E52630;
-  border: none;
-  border-radius: 100px;
-}
-
-.c20:active,
-.c20:focus,
-.c20:hover {
-  background-color: #961D35;
-}
-
-.c0 {
-  width: 35px;
-  height: 35px;
-  display: inline-block;
-}
-
-.c3 {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255,255,255,0.5);
-  z-index: 100;
-  top: 0;
-  left: 0;
-  overflow-y: auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-}
-
-.c3 div[aria-modal='true'] {
-  padding: 2rem;
-}
-
-.c22 {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 40px;
-  height: 40px;
-  margin-left: 0;
-}
-
-.c5 {
-  width: 100%;
-}
-
-.c5 input {
-  font-size: 1rem;
-}
-
-@media (min-width:740px) {
-  .c16 {
-    max-width: 290px;
-  }
-}
-
-@media (min-width:740px) {
-  .c19 input {
-    font-size: 1.25rem;
-    max-width: 180px;
-  }
-}
-
-@media (min-width:1024px) {
-  .c20 {
-    width: auto;
-    padding: 1rem 2rem;
-    margin: 0 auto 2rem;
-  }
-}
-
-@media (min-width:740px) {
-  .c22 {
-    margin: 4rem 0 0;
-    right: 25%;
-  }
-}
-
-@media (min-width:740px) {
-  .c5 {
-    margin-top: 4rem;
-    width: 50%;
-  }
-
-  .c5 input {
-    font-size: 1.25rem;
-  }
-}
-
-<div>
-  <div
-    className="c0"
-    data-test="header-esu"
-    onKeyDown={[Function]}
-  >
-    <a
-      className="c1"
-      data-test="header-esu-icon"
-      href="#"
-      onClick={[Function]}
-      rel="noopener noreferrer"
-      role="button"
-      tabIndex="0"
-      target="_self"
-      title="Sign up for emails"
-    >
-      <img
-        alt="Sign up for emails"
-        className="c2"
-        src="mock.asset"
-      />
-    </a>
-    <div
-      className="c3"
-    >
-      <div
-        aria-modal="true"
-        className="c4 c5"
-      >
-        <h2
-          className="c6 c7"
-          color="inherit"
-          size="xxl"
-        >
-          Stay in the know!
-        </h2>
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "<p>Get regular email updates and info on what we're up to!</p>",
-              }
-            }
-          />
-        </div>
-        <form
-          className="c10"
-          onSubmit={[Function]}
-        >
-          <label
-            className="c11 c12"
-            htmlFor="email"
-          >
-            <span
-              className="c13 c14"
-              color="inherit"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "email",
-                }
-              }
-              size="s"
-            />
-            <div
-              className="c15"
-            >
-              
-              <input
-                aria-label="Email address"
-                className="c16"
-                id="email"
-                name="email"
-                onChange={[Function]}
-                placeholder="example@youremail.com"
-                required={false}
-                type="email"
-                value=""
-              />
-            </div>
-            <span
-              className="c17"
-              color="red"
-              data-test="error-message"
-              size="sm"
-            >
-              <span
-                className="c18"
-              >
-                invalid email
-              </span>
-            </span>
-          </label>
-          <div
-            className="c19"
-          >
-            <input
-              className="c20"
-              color="red"
-              data-test="subscribe-button"
-              onClick={[Function]}
-              type="submit"
-              value=" Subscribe"
-            />
-          </div>
-        </form>
-        <div
-          className="c21"
-        >
-          <div
-            className="c9"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "<p>Our <a class=\\"link link--white inline\\" href=\\"/privacy-notice\\">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>",
-              }
-            }
-          />
-        </div>
-      </div>
-      <a
-        className="c1 c22"
-        data-test="header-esu-icon"
-        href="#"
-        onClick={[Function]}
-        rel="noopener noreferrer"
-        role="button"
-        tabIndex="0"
-        target="_self"
-        title="Close email sign-up"
-      >
-        <img
-          alt="Close email sign-up"
-          className="c2"
-          src="mock.asset"
-        />
-        <span
-          className="c23"
-        >
-          (opens in new window)
-        </span>
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders correctly with modal closed 1`] = `
-.c1 {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  display: block;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-
-.c1:hover,
-.c1:focus {
-  opacity: 0.6;
-}
-
-.c2 {
-  width: 100%;
-}
-
-.c0 {
-  width: 35px;
-  height: 35px;
-  display: inline-block;
-}
-
-<div>
-  <div
-    className="c0"
-    data-test="header-esu"
-    onKeyDown={[Function]}
-  >
-    <a
-      className="c1"
-      data-test="header-esu-icon"
-      href="#"
-      onClick={[Function]}
-      rel="noopener noreferrer"
-      role="button"
-      tabIndex="0"
-      target="_self"
-      title="Sign up for emails"
-    >
-      <img
-        alt="Sign up for emails"
-        className="c2"
-        src="mock.asset"
-      />
-    </a>
-  </div>
-</div>
-`;
-
-exports[`renders correctly with modal open 1`] = `
-.c6 {
-  font-size: 3rem;
-  line-height: 3rem;
-  text-transform: uppercase;
-  font-weight: 400;
-  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;
-}
-
-.c13 {
-  font-size: 1rem;
-  line-height: 1rem;
-  text-transform: inherit;
-  line-height: normal;
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-}
-
-.c11 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  color: #5C5C5E;
-  width: 100%;
-}
-
-.c14 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.c16 {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 48px;
-  padding: 1rem 1.5rem;
-  background-color: #F4F3F5;
-  border: 1px solid;
-  border-color: #E1E2E3;
-  box-shadow: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  color: #000000;
-  border-radius: 0.5rem;
-  font-size: inherit;
-  z-index: 2;
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-}
-
-.c16:focus {
-  border: 1px solid #666;
-}
-
-.c15 {
-  position: relative;
-  font-size: 1.25rem;
-}
-
-.c9 {
-  text-align: left;
-}
-
-.c1 {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  display: block;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-
-.c1:hover,
-.c1:focus {
-  opacity: 0.6;
-}
-
-.c2 {
-  width: 100%;
-}
-
-.c21 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-size: 1rem;
-  color: #FFFFFF;
-  background-color: #2C0230;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-bottom: 1rem;
-}
-
-.c17 {
-  margin-top: 1rem;
-}
-
-.c17 input {
-  text-align: center;
-  width: 100%;
-  font-size: 1rem;
-}
-
-.c19 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-top: 1rem;
-}
-
-.c19 p {
-  font-size: 1rem;
-  line-height: 2rem;
-}
-
-.c19 p a {
-  font-size: 1rem;
-  color: #FFFFFF;
-}
-
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin: 1rem 0;
-}
-
-.c12 {
-  width: 100%;
-}
-
-.c7 {
-  margin-bottom: 1.5rem;
-}
-
-.c18 {
-  width: 100%;
-  color: #FFFFFF;
-  font-size: 1rem;
-  font-weight: bold;
-  cursor: pointer;
-  padding: 1rem 0.5rem;
-  background: #E52630;
-  border: none;
-  border-radius: 100px;
-}
-
-.c18:active,
-.c18:focus,
-.c18:hover {
-  background-color: #961D35;
-}
-
-.c0 {
-  width: 35px;
-  height: 35px;
-  display: inline-block;
-}
-
-.c3 {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255,255,255,0.5);
-  z-index: 100;
-  top: 0;
-  left: 0;
-  overflow-y: auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-}
-
-.c3 div[aria-modal='true'] {
-  padding: 2rem;
-}
-
-.c20 {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 40px;
-  height: 40px;
-  margin-left: 0;
-}
-
-.c5 {
-  width: 100%;
-}
-
-.c5 input {
-  font-size: 1rem;
-}
-
-@media (min-width:740px) {
-  .c16 {
-    max-width: 290px;
-  }
-}
-
-@media (min-width:740px) {
-  .c17 input {
-    font-size: 1.25rem;
-    max-width: 180px;
-  }
-}
-
-@media (min-width:1024px) {
-  .c18 {
-    width: auto;
-    padding: 1rem 2rem;
-    margin: 0 auto 2rem;
-  }
-}
-
-@media (min-width:740px) {
-  .c20 {
-    margin: 4rem 0 0;
-    right: 25%;
-  }
-}
-
-@media (min-width:740px) {
-  .c5 {
-    margin-top: 4rem;
-    width: 50%;
-  }
-
-  .c5 input {
-    font-size: 1.25rem;
-  }
-}
-
-<div>
-  <div
-    className="c0"
-    data-test="header-esu"
-    onKeyDown={[Function]}
-  >
-    <a
-      className="c1"
-      data-test="header-esu-icon"
-      href="#"
-      onClick={[Function]}
-      rel="noopener noreferrer"
-      role="button"
-      tabIndex="0"
-      target="_self"
-      title="Sign up for emails"
-    >
-      <img
-        alt="Sign up for emails"
-        className="c2"
-        src="mock.asset"
-      />
-    </a>
-    <div
-      className="c3"
-    >
-      <div
-        aria-modal="true"
-        className="c4 c5"
-      >
-        <h2
-          className="c6 c7"
-          color="inherit"
-          size="xxl"
-        >
-          Stay in the know!
-        </h2>
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "<p>Get regular email updates and info on what we're up to!</p>",
-              }
-            }
-          />
-        </div>
-        <form
-          className="c10"
-          onSubmit={[Function]}
-        >
-          <label
-            className="c11 c12"
-            htmlFor="email"
-          >
-            <span
-              className="c13 c14"
-              color="inherit"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "email",
-                }
-              }
-              size="s"
-            />
-            <div
-              className="c15"
-            >
-              
-              <input
-                aria-label="Email address"
-                className="c16"
-                id="email"
-                name="email"
-                onChange={[Function]}
-                placeholder="example@youremail.com"
-                required={false}
-                type="email"
-                value=""
-              />
-            </div>
-            
-          </label>
-          <div
-            className="c17"
-          >
-            <input
-              className="c18"
-              color="red"
-              data-test="subscribe-button"
-              onClick={[Function]}
-              type="submit"
-              value=" Subscribe"
-            />
-          </div>
-        </form>
-        <div
-          className="c19"
-        >
-          <div
-            className="c9"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "<p>Our <a class=\\"link link--white inline\\" href=\\"/privacy-notice\\">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>",
-              }
-            }
-          />
-        </div>
-      </div>
-      <a
-        className="c1 c20"
-        data-test="header-esu-icon"
-        href="#"
-        onClick={[Function]}
-        rel="noopener noreferrer"
-        role="button"
-        tabIndex="0"
-        target="_self"
-        title="Close email sign-up"
-      >
-        <img
-          alt="Close email sign-up"
-          className="c2"
-          src="mock.asset"
-        />
-        <span
-          className="c21"
-        >
-          (opens in new window)
-        </span>
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders correctly with success message 1`] = `
-.c6 {
-  font-size: 3rem;
-  line-height: 3rem;
-  text-transform: uppercase;
-  font-weight: 400;
-  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;
-}
-
-.c9 {
-  text-align: left;
-}
-
-.c1 {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  display: block;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-
-.c1:hover,
-.c1:focus {
-  opacity: 0.6;
-}
-
-.c2 {
-  width: 100%;
-}
-
-.c12 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-size: 1rem;
-  color: #FFFFFF;
-  background-color: #2C0230;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-bottom: 1rem;
-}
-
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-top: 1rem;
-}
-
-.c10 p {
-  font-size: 1rem;
-  line-height: 2rem;
-}
-
-.c10 p a {
-  font-size: 1rem;
-  color: #FFFFFF;
-}
-
-.c7 {
-  margin-bottom: 1.5rem;
-}
-
-.c0 {
-  width: 35px;
-  height: 35px;
-  display: inline-block;
-}
-
-.c3 {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255,255,255,0.5);
-  z-index: 100;
-  top: 0;
-  left: 0;
-  overflow-y: auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-}
-
-.c3 div[aria-modal='true'] {
-  padding: 2rem;
-}
-
-.c11 {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 40px;
-  height: 40px;
-  margin-left: 0;
-}
-
-.c5 {
-  width: 100%;
-}
-
-.c5 input {
-  font-size: 1rem;
-}
-
-@media (min-width:740px) {
-  .c11 {
-    margin: 4rem 0 0;
-    right: 25%;
-  }
-}
-
-@media (min-width:740px) {
-  .c5 {
-    margin-top: 4rem;
-    width: 50%;
-  }
-
-  .c5 input {
-    font-size: 1.25rem;
-  }
-}
-
-<div>
-  <div
-    className="c0"
-    data-test="header-esu"
-    onKeyDown={[Function]}
-  >
-    <a
-      className="c1"
-      data-test="header-esu-icon"
-      href="#"
-      onClick={[Function]}
-      rel="noopener noreferrer"
-      role="button"
-      tabIndex="0"
-      target="_self"
-      title="Sign up for emails"
-    >
-      <img
-        alt="Sign up for emails"
-        className="c2"
-        src="mock.asset"
-      />
-    </a>
-    <div
-      className="c3"
-    >
-      <div
-        aria-modal="true"
-        className="c4 c5"
-      >
-        <h2
-          className="c6 c7"
-          color="inherit"
-          size="xxl"
-        >
-          Stay in the know!
-        </h2>
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "<p>Thanks! Your first email will be with you shortly</p>",
-              }
-            }
-          />
-        </div>
-        <div
-          className="c10"
-        >
-          <div
-            className="c9"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "<p>Our <a class=\\"link link--white inline\\" href=\\"/privacy-notice\\">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>",
-              }
-            }
-          />
-        </div>
-      </div>
-      <a
-        className="c1 c11"
-        data-test="header-esu-icon"
-        href="#"
-        onClick={[Function]}
-        rel="noopener noreferrer"
-        role="button"
-        tabIndex="0"
-        target="_self"
-        title="Close email sign-up"
-      >
-        <img
-          alt="Close email sign-up"
-          className="c2"
-          src="mock.asset"
-        />
-        <span
-          className="c12"
-        >
-          (opens in new window)
-        </span>
-      </a>
-    </div>
-  </div>
-</div>
-`;