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

exports[`auth configuration renders all auth enabled 1`] = `
<main
  className="Main-root"
  data-testid="signIn-main"
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
  >
    <form
      autoComplete="off"
      onSubmit={[Function]}
    >
      <div
        className="Box-root HorizontalGutter-root HorizontalGutter-full"
      >
        <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="password"
          >
            Password
          </label>
          <div
            className="PasswordField-fullWidth PasswordField-root"
          >
            <div
              className="PasswordField-wrapper"
            >
              <input
                autoCapitalize="off"
                autoComplete="off"
                autoCorrect="off"
                className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                data-testid="password-field"
                disabled={false}
                id="password"
                name="password"
                onBlur={[Function]}
                onChange={[Function]}
                onFocus={[Function]}
                placeholder="Password"
                spellCheck={false}
                type="password"
                value=""
              />
              <div
                className="PasswordField-icon"
                onClick={[Function]}
                onKeyUp={[Function]}
                role="button"
                tabIndex={0}
                title="Show password"
              >
                <i
                  aria-hidden="true"
                  className="Icon-root Icon-sm"
                >
                  visibility
                </i>
              </div>
            </div>
          </div>
          <div
            className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
          >
            <p
              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
            >
              <a
                className="TextLink-root"
                href="http://localhost/?view=FORGOT_PASSWORD"
                onClick={[Function]}
              >
                Forgot your password?
              </a>
            </p>
          </div>
        </div>
        <button
          className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
          data-color="brand"
          data-variant="filled"
          disabled={false}
          onBlur={[Function]}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          onTouchEnd={[Function]}
          type="submit"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-md ButtonIcon-root"
          >
            email
          </i>
          <span>
            Sign in with Email
          </span>
        </button>
      </div>
    </form>
    <div
      className="Box-root Flex-root HorizontalSeparator-root Flex-flex Flex-justifyCenter Flex-alignCenter"
    >
      <hr
        className="HorizontalSeparator-hr"
      />
      <div
        className="HorizontalSeparator-text"
      >
        Or
      </div>
    </div>
    <div
      className="Box-root HorizontalGutter-root HorizontalGutter-full"
    >
      <button
        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantRegular FacebookButton-variantRegular Button-uppercase Button-fullWidth"
        data-color="regular"
        data-variant="regular"
        onBlur={[Function]}
        onClick={[Function]}
        onFocus={[Function]}
        onMouseOut={[Function]}
        onMouseOver={[Function]}
        onTouchEnd={[Function]}
        type="button"
      >
        <svg
          fill="none"
          height="17"
          viewBox="0 0 17 17"
          width="17"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M16.0893 1.25391C16.0893 1.00781 15.9838 0.796875 15.808 0.621094C15.6323 0.480469 15.4213 0.375 15.2104 0.375H1.21819C0.936942 0.375 0.726005 0.480469 0.58538 0.621094C0.409598 0.796875 0.339286 1.00781 0.339286 1.25391V15.2461C0.339286 15.4922 0.409598 15.7031 0.58538 15.8789C0.726005 16.0547 0.936942 16.125 1.21819 16.125H8.74163V10.0078H6.70257V7.65234H8.74163V5.89453C8.74163 4.91016 9.02288 4.13672 9.58538 3.57422C10.1479 3.04688 10.8862 2.76562 11.8002 2.76562C12.5033 2.76562 13.1362 2.80078 13.6283 2.83594V4.98047H12.3627C11.9057 4.98047 11.5893 5.08594 11.4135 5.29688C11.2729 5.47266 11.2026 5.75391 11.2026 6.14062V7.65234H13.558L13.2416 10.0078H11.2026V16.125H15.2104C15.4565 16.125 15.6674 16.0547 15.8432 15.8789C15.9838 15.7031 16.0893 15.4922 16.0893 15.2461V1.25391Z"
            fill="white"
          />
        </svg>
        <span>
          Sign in with Facebook
        </span>
      </button>
      <button
        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantRegular GoogleButton-variantRegular Button-uppercase Button-fullWidth"
        data-color="regular"
        data-variant="regular"
        onBlur={[Function]}
        onClick={[Function]}
        onFocus={[Function]}
        onMouseOut={[Function]}
        onMouseOver={[Function]}
        onTouchEnd={[Function]}
        type="button"
      >
        <svg
          fill="none"
          height="18"
          viewBox="0 0 18 18"
          width="18"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M17.2924 9.46094C17.2924 9.00391 17.2221 8.51172 17.1518 7.98438H8.85491V11.0078H13.8119C13.7065 11.5352 13.4955 12.0625 13.2143 12.5547C12.7924 13.1875 12.2651 13.7148 11.6323 14.0664C10.8237 14.5586 9.9096 14.7695 8.85491 14.7695C7.87054 14.7695 6.95647 14.5234 6.14788 14.0312C5.30413 13.5391 4.67132 12.8711 4.17913 12.0273C3.68694 11.1836 3.44085 10.2695 3.44085 9.25C3.44085 8.08984 3.75725 7.03516 4.39007 6.12109C4.95257 5.27734 5.726 4.64453 6.71038 4.22266C7.6596 3.80078 8.64397 3.66016 9.62835 3.80078C10.683 3.94141 11.5619 4.39844 12.3354 5.10156L14.6908 2.81641C13.0737 1.30469 11.1049 0.53125 8.85491 0.53125C7.27288 0.53125 5.83147 0.953125 4.49554 1.72656C3.1596 2.5 2.06975 3.55469 1.29632 4.89062C0.52288 6.22656 0.136161 7.70312 0.136161 9.25C0.136161 10.832 0.52288 12.2734 1.29632 13.6094C2.06975 14.9453 3.1596 16.0352 4.49554 16.8086C5.83147 17.582 7.27288 17.9688 8.85491 17.9688C10.5073 17.9688 11.9838 17.6172 13.2494 16.8789C14.5151 16.1758 15.5346 15.1562 16.2377 13.8555C16.9408 12.5898 17.2924 11.1133 17.2924 9.46094Z"
            fill="white"
          />
        </svg>
        <span>
          Sign in with Google
        </span>
      </button>
      <button
        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular OIDCButton-colorRegular Button-variantFilled Button-fullWidth"
        data-color="regular"
        data-variant="filled"
        onBlur={[Function]}
        onClick={[Function]}
        onFocus={[Function]}
        onMouseOut={[Function]}
        onMouseOver={[Function]}
        onTouchEnd={[Function]}
        type="button"
      >
        <span>
          Sign in with OIDC
        </span>
      </button>
    </div>
  </div>
</main>
`;

exports[`auth configuration renders only some social login enabled 1`] = `
<main
  className="Main-root"
  data-testid="signIn-main"
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
  >
    <div
      className="Box-root HorizontalGutter-root HorizontalGutter-full"
    >
      <button
        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantRegular FacebookButton-variantRegular Button-uppercase Button-fullWidth"
        data-color="regular"
        data-variant="regular"
        onBlur={[Function]}
        onClick={[Function]}
        onFocus={[Function]}
        onMouseOut={[Function]}
        onMouseOver={[Function]}
        onTouchEnd={[Function]}
        type="button"
      >
        <svg
          fill="none"
          height="17"
          viewBox="0 0 17 17"
          width="17"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M16.0893 1.25391C16.0893 1.00781 15.9838 0.796875 15.808 0.621094C15.6323 0.480469 15.4213 0.375 15.2104 0.375H1.21819C0.936942 0.375 0.726005 0.480469 0.58538 0.621094C0.409598 0.796875 0.339286 1.00781 0.339286 1.25391V15.2461C0.339286 15.4922 0.409598 15.7031 0.58538 15.8789C0.726005 16.0547 0.936942 16.125 1.21819 16.125H8.74163V10.0078H6.70257V7.65234H8.74163V5.89453C8.74163 4.91016 9.02288 4.13672 9.58538 3.57422C10.1479 3.04688 10.8862 2.76562 11.8002 2.76562C12.5033 2.76562 13.1362 2.80078 13.6283 2.83594V4.98047H12.3627C11.9057 4.98047 11.5893 5.08594 11.4135 5.29688C11.2729 5.47266 11.2026 5.75391 11.2026 6.14062V7.65234H13.558L13.2416 10.0078H11.2026V16.125H15.2104C15.4565 16.125 15.6674 16.0547 15.8432 15.8789C15.9838 15.7031 16.0893 15.4922 16.0893 15.2461V1.25391Z"
            fill="white"
          />
        </svg>
        <span>
          Sign in with Facebook
        </span>
      </button>
      <button
        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantRegular GoogleButton-variantRegular Button-uppercase Button-fullWidth"
        data-color="regular"
        data-variant="regular"
        onBlur={[Function]}
        onClick={[Function]}
        onFocus={[Function]}
        onMouseOut={[Function]}
        onMouseOver={[Function]}
        onTouchEnd={[Function]}
        type="button"
      >
        <svg
          fill="none"
          height="18"
          viewBox="0 0 18 18"
          width="18"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M17.2924 9.46094C17.2924 9.00391 17.2221 8.51172 17.1518 7.98438H8.85491V11.0078H13.8119C13.7065 11.5352 13.4955 12.0625 13.2143 12.5547C12.7924 13.1875 12.2651 13.7148 11.6323 14.0664C10.8237 14.5586 9.9096 14.7695 8.85491 14.7695C7.87054 14.7695 6.95647 14.5234 6.14788 14.0312C5.30413 13.5391 4.67132 12.8711 4.17913 12.0273C3.68694 11.1836 3.44085 10.2695 3.44085 9.25C3.44085 8.08984 3.75725 7.03516 4.39007 6.12109C4.95257 5.27734 5.726 4.64453 6.71038 4.22266C7.6596 3.80078 8.64397 3.66016 9.62835 3.80078C10.683 3.94141 11.5619 4.39844 12.3354 5.10156L14.6908 2.81641C13.0737 1.30469 11.1049 0.53125 8.85491 0.53125C7.27288 0.53125 5.83147 0.953125 4.49554 1.72656C3.1596 2.5 2.06975 3.55469 1.29632 4.89062C0.52288 6.22656 0.136161 7.70312 0.136161 9.25C0.136161 10.832 0.52288 12.2734 1.29632 13.6094C2.06975 14.9453 3.1596 16.0352 4.49554 16.8086C5.83147 17.582 7.27288 17.9688 8.85491 17.9688C10.5073 17.9688 11.9838 17.6172 13.2494 16.8789C14.5151 16.1758 15.5346 15.1562 16.2377 13.8555C16.9408 12.5898 17.2924 11.1133 17.2924 9.46094Z"
            fill="white"
          />
        </svg>
        <span>
          Sign in with Google
        </span>
      </button>
    </div>
  </div>
</main>
`;

exports[`renders sign in view 1`] = `
<div>
  <div>
    <div
      data-testid="signIn-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"
          >
            Sign In
          </h1>
          <h1
            className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
          >
            to join the conversation
          </h1>
        </header>
      </div>
      <div
        className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
      >
        <nav>
          <div
            className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
          >
            <span>
              Don't have an account? 
            </span>
            <a
              className="TextLink-root"
              href="http://localhost/?view=SIGN_UP"
              onClick={[Function]}
            >
              Sign Up
            </a>
          </div>
        </nav>
      </div>
      <main
        className="Main-root"
        data-testid="signIn-main"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
        >
          <form
            autoComplete="off"
            onSubmit={[Function]}
          >
            <div
              className="Box-root HorizontalGutter-root HorizontalGutter-full"
            >
              <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="password"
                >
                  Password
                </label>
                <div
                  className="PasswordField-fullWidth PasswordField-root"
                >
                  <div
                    className="PasswordField-wrapper"
                  >
                    <input
                      autoCapitalize="off"
                      autoComplete="off"
                      autoCorrect="off"
                      className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                      data-testid="password-field"
                      disabled={false}
                      id="password"
                      name="password"
                      onBlur={[Function]}
                      onChange={[Function]}
                      onFocus={[Function]}
                      placeholder="Password"
                      spellCheck={false}
                      type="password"
                      value=""
                    />
                    <div
                      className="PasswordField-icon"
                      onClick={[Function]}
                      onKeyUp={[Function]}
                      role="button"
                      tabIndex={0}
                      title="Show password"
                    >
                      <i
                        aria-hidden="true"
                        className="Icon-root Icon-sm"
                      >
                        visibility
                      </i>
                    </div>
                  </div>
                </div>
                <div
                  className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
                >
                  <p
                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                  >
                    <a
                      className="TextLink-root"
                      href="http://localhost/?view=FORGOT_PASSWORD"
                      onClick={[Function]}
                    >
                      Forgot your password?
                    </a>
                  </p>
                </div>
              </div>
              <button
                className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
                data-color="brand"
                data-variant="filled"
                disabled={false}
                onBlur={[Function]}
                onFocus={[Function]}
                onMouseOut={[Function]}
                onMouseOver={[Function]}
                onTouchEnd={[Function]}
                type="submit"
              >
                <i
                  aria-hidden="true"
                  className="Icon-root Icon-md ButtonIcon-root"
                >
                  email
                </i>
                <span>
                  Sign in with Email
                </span>
              </button>
            </div>
          </form>
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-full"
          />
        </div>
      </main>
    </div>
  </div>
</div>
`;
