// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`accepts valid email 1`] = `
<form
  autoComplete="off"
  onSubmit={[Function]}
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
  >
    <p
      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
    >
      For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
    </p>
    <ul
      className="UnorderedList-root"
    >
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Receive updates regarding any changes to your account
(email address, username, password, etc.)
          </div>
        </div>
      </li>
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Allow you to download your comments.
          </div>
        </div>
      </li>
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Send comment notifications that you have chosen to receive.
          </div>
        </div>
      </li>
    </ul>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="email"
      >
        Email Address
      </label>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorRegular"
          disabled={false}
          id="email"
          name="email"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Email Address"
          type="email"
          value="hans@test.com"
        />
      </div>
    </div>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="confirmEmail"
      >
        Confirm Email Address
      </label>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorError"
          disabled={false}
          id="confirmEmail"
          name="confirmEmail"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Confirm Email Address"
          type="text"
          value=""
        />
      </div>
      <div
        className="Message-root Message-colorError Message-fullWidth"
      >
        <i
          aria-hidden="true"
          className="Icon-root Icon-sm MessageIcon-root"
        >
          warning
        </i>
        <span>
          This field is required.
        </span>
      </div>
    </div>
    <button
      className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
      data-color="primary"
      data-variant="filled"
      disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      onTouchEnd={[Function]}
      type="submit"
    >
      Add Email Address
    </button>
  </div>
</form>
`;

exports[`checks for invalid email 1`] = `
<form
  autoComplete="off"
  onSubmit={[Function]}
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
  >
    <p
      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
    >
      For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
    </p>
    <ul
      className="UnorderedList-root"
    >
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Receive updates regarding any changes to your account
(email address, username, password, etc.)
          </div>
        </div>
      </li>
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Allow you to download your comments.
          </div>
        </div>
      </li>
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Send comment notifications that you have chosen to receive.
          </div>
        </div>
      </li>
    </ul>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="email"
      >
        Email Address
      </label>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorError"
          disabled={false}
          id="email"
          name="email"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Email Address"
          type="email"
          value="invalid-email"
        />
      </div>
      <div
        className="Message-root Message-colorError Message-fullWidth"
      >
        <i
          aria-hidden="true"
          className="Icon-root Icon-sm MessageIcon-root"
        >
          warning
        </i>
        <span>
          Please enter a valid email address.
        </span>
      </div>
    </div>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="confirmEmail"
      >
        Confirm Email Address
      </label>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorError"
          disabled={false}
          id="confirmEmail"
          name="confirmEmail"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Confirm Email Address"
          type="text"
          value="invalid-confirmation-email"
        />
      </div>
      <div
        className="Message-root Message-colorError Message-fullWidth"
      >
        <i
          aria-hidden="true"
          className="Icon-root Icon-sm MessageIcon-root"
        >
          warning
        </i>
        <span>
          Emails do not match. Try again.
        </span>
      </div>
    </div>
    <button
      className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
      data-color="primary"
      data-variant="filled"
      disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      onTouchEnd={[Function]}
      type="submit"
    >
      Add Email Address
    </button>
  </div>
</form>
`;

exports[`renders addEmailAddress view 1`] = `
<div>
  <div>
    <div
      data-testid="addEmailAddress-container"
    >
      <div
        className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
      >
        <header>
          <h1
            className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
          >
            Add Email Address
          </h1>
        </header>
      </div>
      <main
        className="Main-root"
        data-testid="addEmailAddress-main"
      >
        <form
          autoComplete="off"
          onSubmit={[Function]}
        >
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
          >
            <p
              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
            >
              For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
            </p>
            <ul
              className="UnorderedList-root"
            >
              <li
                className="ListItem-root"
              >
                <div
                  className="ListItem-leftCol"
                >
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-sm"
                  >
                    done
                  </i>
                </div>
                <div>
                  <div
                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                  >
                    Receive updates regarding any changes to your account
(email address, username, password, etc.)
                  </div>
                </div>
              </li>
              <li
                className="ListItem-root"
              >
                <div
                  className="ListItem-leftCol"
                >
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-sm"
                  >
                    done
                  </i>
                </div>
                <div>
                  <div
                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                  >
                    Allow you to download your comments.
                  </div>
                </div>
              </li>
              <li
                className="ListItem-root"
              >
                <div
                  className="ListItem-leftCol"
                >
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-sm"
                  >
                    done
                  </i>
                </div>
                <div>
                  <div
                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                  >
                    Send comment notifications that you have chosen to receive.
                  </div>
                </div>
              </li>
            </ul>
            <div
              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
            >
              <label
                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                htmlFor="email"
              >
                Email Address
              </label>
              <div
                className="TextField-root TextField-fullWidth"
              >
                <input
                  className="TextField-input TextField-colorRegular"
                  disabled={false}
                  id="email"
                  name="email"
                  onBlur={[Function]}
                  onChange={[Function]}
                  onFocus={[Function]}
                  placeholder="Email Address"
                  type="email"
                  value=""
                />
              </div>
            </div>
            <div
              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
            >
              <label
                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                htmlFor="confirmEmail"
              >
                Confirm Email Address
              </label>
              <div
                className="TextField-root TextField-fullWidth"
              >
                <input
                  className="TextField-input TextField-colorRegular"
                  disabled={false}
                  id="confirmEmail"
                  name="confirmEmail"
                  onBlur={[Function]}
                  onChange={[Function]}
                  onFocus={[Function]}
                  placeholder="Confirm Email Address"
                  type="text"
                  value=""
                />
              </div>
            </div>
            <button
              className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
              data-color="primary"
              data-variant="filled"
              disabled={false}
              onBlur={[Function]}
              onFocus={[Function]}
              onMouseOut={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              type="submit"
            >
              Add Email Address
            </button>
          </div>
        </form>
      </main>
    </div>
  </div>
</div>
`;

exports[`shows error when submitting empty form 1`] = `
<form
  autoComplete="off"
  onSubmit={[Function]}
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
  >
    <p
      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
    >
      For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
    </p>
    <ul
      className="UnorderedList-root"
    >
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Receive updates regarding any changes to your account
(email address, username, password, etc.)
          </div>
        </div>
      </li>
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Allow you to download your comments.
          </div>
        </div>
      </li>
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Send comment notifications that you have chosen to receive.
          </div>
        </div>
      </li>
    </ul>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="email"
      >
        Email Address
      </label>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorError"
          disabled={false}
          id="email"
          name="email"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Email Address"
          type="email"
          value=""
        />
      </div>
      <div
        className="Message-root Message-colorError Message-fullWidth"
      >
        <i
          aria-hidden="true"
          className="Icon-root Icon-sm MessageIcon-root"
        >
          warning
        </i>
        <span>
          This field is required.
        </span>
      </div>
    </div>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="confirmEmail"
      >
        Confirm Email Address
      </label>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorError"
          disabled={false}
          id="confirmEmail"
          name="confirmEmail"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Confirm Email Address"
          type="text"
          value=""
        />
      </div>
      <div
        className="Message-root Message-colorError Message-fullWidth"
      >
        <i
          aria-hidden="true"
          className="Icon-root Icon-sm MessageIcon-root"
        >
          warning
        </i>
        <span>
          This field is required.
        </span>
      </div>
    </div>
    <button
      className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
      data-color="primary"
      data-variant="filled"
      disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      onTouchEnd={[Function]}
      type="submit"
    >
      Add Email Address
    </button>
  </div>
</form>
`;

exports[`shows server error 1`] = `
<form
  autoComplete="off"
  onSubmit={[Function]}
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
  >
    <p
      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
    >
      For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
    </p>
    <ul
      className="UnorderedList-root"
    >
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Receive updates regarding any changes to your account
(email address, username, password, etc.)
          </div>
        </div>
      </li>
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Allow you to download your comments.
          </div>
        </div>
      </li>
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Send comment notifications that you have chosen to receive.
          </div>
        </div>
      </li>
    </ul>
    <div
      className="CallOut-root CallOut-colorError CallOut-fullWidth"
    >
      <div
        className="CallOut-inner"
      >
        server error

GraphQL request (4:3)
3: ) {
4:   setEmail(input: $input) {
     ^
5:     user {

      </div>
    </div>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="email"
      >
        Email Address
      </label>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorRegular"
          disabled={false}
          id="email"
          name="email"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Email Address"
          type="email"
          value="hans@test.com"
        />
      </div>
    </div>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="confirmEmail"
      >
        Confirm Email Address
      </label>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorRegular"
          disabled={false}
          id="confirmEmail"
          name="confirmEmail"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Confirm Email Address"
          type="text"
          value="hans@test.com"
        />
      </div>
    </div>
    <button
      className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
      data-color="primary"
      data-variant="filled"
      disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      onTouchEnd={[Function]}
      type="submit"
    >
      Add Email Address
    </button>
  </div>
</form>
`;

exports[`successfully sets email 1`] = `
<form
  autoComplete="off"
  onSubmit={[Function]}
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
  >
    <p
      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
    >
      For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
    </p>
    <ul
      className="UnorderedList-root"
    >
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Receive updates regarding any changes to your account
(email address, username, password, etc.)
          </div>
        </div>
      </li>
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Allow you to download your comments.
          </div>
        </div>
      </li>
      <li
        className="ListItem-root"
      >
        <div
          className="ListItem-leftCol"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            done
          </i>
        </div>
        <div>
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            Send comment notifications that you have chosen to receive.
          </div>
        </div>
      </li>
    </ul>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="email"
      >
        Email Address
      </label>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorRegular"
          disabled={false}
          id="email"
          name="email"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Email Address"
          type="email"
          value="hans@test.com"
        />
      </div>
    </div>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="confirmEmail"
      >
        Confirm Email Address
      </label>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorRegular"
          disabled={false}
          id="confirmEmail"
          name="confirmEmail"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Confirm Email Address"
          type="text"
          value="hans@test.com"
        />
      </div>
    </div>
    <button
      className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
      data-color="primary"
      data-variant="filled"
      disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      onTouchEnd={[Function]}
      type="submit"
    >
      Add Email Address
    </button>
  </div>
</form>
`;
