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

exports[`<Onboarding /> EmailPreferencesForm renders properly 1`] = `
preact-render-spy (1 nodes)
-------
<main class="onboarding-body">
  <div class="onboarding-main crayons-modal">
    <div class="crayons-modal__box">
      <nav class="onboarding-navigation">
        <div class="navigation-content">
          <div class="back-button-container">
            <button
              onClick={[Function bound prevSlide]}
              class="back-button"
              type="button"
            >
              <svg
                width="24"
                height="24"
                fill="none"
                class="crayons-icon"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414L7.828 11z"></path>
              </svg>
            </button>
          </div>
          <div class="stepper">
            <span class="dot active"></span>
            <span class="dot active"></span>
            <span class="dot active"></span>
            <span class="dot active"></span>
          </div>
          <button
            disabled={false}
            onClick={[Function bound onSubmit]}
            class="next-button"
            type="button"
          >
            Finish
          </button>
        </div>
      </nav>
      <div class="onboarding-content terms-and-conditions-wrapper">
        <header class="onboarding-content-header">
          <h1 class="title">Almost there!</h1>
          <h2 class="subtitle">
            Review your email preferences before we continue.
          </h2>
        </header>
        <form>
          <fieldset>
            <legend>Email preferences</legend>
            <ul>
              <li class="checkbox-item">
                <label htmlFor="email_newsletter">
                  <input
                    type="checkbox"
                    id="email_newsletter"
                    name="email_newsletter"
                    checked={true}
                    onChange={[Function bound handleChange]}
                   />
                  I want to receive weekly newsletter emails.
                </label>
              </li>
              <li class="checkbox-item">
                <label htmlFor="email_digest_periodic">
                  <input
                    type="checkbox"
                    id="email_digest_periodic"
                    name="email_digest_periodic"
                    checked={true}
                    onChange={[Function bound handleChange]}
                   />
                  I want to receive a periodic digest of top posts from my tags.
                </label>
              </li>
            </ul>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</main>

`;

exports[`<Onboarding /> FollowTags renders properly 1`] = `
preact-render-spy (1 nodes)
-------
<main class="onboarding-body">
  <div class="onboarding-main crayons-modal">
    <div class="crayons-modal__box overflow-auto">
      <nav class="onboarding-navigation">
        <div class="navigation-content">
          <div class="back-button-container">
            <button
              onClick={[Function bound prevSlide]}
              class="back-button"
              type="button"
            >
              <svg
                width="24"
                height="24"
                fill="none"
                class="crayons-icon"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414L7.828 11z"></path>
              </svg>
            </button>
          </div>
          <div class="stepper">
            <span class="dot active"></span>
            <span class="dot "></span>
            <span class="dot "></span>
            <span class="dot "></span>
          </div>
          <button
            disabled={false}
            onClick={[Function bound handleComplete]}
            class="next-button skip-for-now"
            type="button"
          >
            Skip for now
          </button>
        </div>
      </nav>
      <div class="onboarding-content toggle-bottom">
        <header class="onboarding-content-header">
          <h1 class="title">What are you interested in?</h1>
          <h2 class="subtitle">Follow tags to customize your feed</h2>
        </header>
        <div class="onboarding-modal-scroll-container">
          <div class="onboarding-tags">
            <div
              class="onboarding-tags__item false"
              style="box-shadow: inset 0 0 0 2px #000000; color: ;"
            >
              <div class="onboarding-tags__item__inner">
                #discuss
                <button
                  type="button"
                  onClick={[Function onClick]}
                  class="onboarding-tags__button false"
                  style="background-color: #000000; color: #ffffff;"
                >
                  + Follow
                </button>
              </div>
            </div>
            <div
              class="onboarding-tags__item false"
              style="box-shadow: inset 0 0 0 2px #f7df1e; color: ;"
            >
              <div class="onboarding-tags__item__inner">
                #javascript
                <button
                  type="button"
                  onClick={[Function onClick]}
                  class="onboarding-tags__button false"
                  style="background-color: #f7df1e; color: #000000;"
                >
                  + Follow
                </button>
              </div>
            </div>
            <div
              class="onboarding-tags__item false"
              style="box-shadow: inset 0 0 0 2px #2a2566; color: ;"
            >
              <div class="onboarding-tags__item__inner">
                #career
                <button
                  type="button"
                  onClick={[Function onClick]}
                  class="onboarding-tags__button false"
                  style="background-color: #2a2566; color: #ffffff;"
                >
                  + Follow
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="onboarding-selection-status">
          <div class="selection-status-content">
            <p class="follow-count-message">0 tags selected</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

`;

exports[`<Onboarding /> FollowUsers renders properly 1`] = `
preact-render-spy (1 nodes)
-------
<main class="onboarding-body">
  <div class="onboarding-main crayons-modal">
    <div class="crayons-modal__box overflow-auto">
      <nav class="onboarding-navigation">
        <div class="navigation-content">
          <div class="back-button-container">
            <button
              onClick={[Function bound prevSlide]}
              class="back-button"
              type="button"
            >
              <svg
                width="24"
                height="24"
                fill="none"
                class="crayons-icon"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414L7.828 11z"></path>
              </svg>
            </button>
          </div>
          <div class="stepper">
            <span class="dot active"></span>
            <span class="dot active"></span>
            <span class="dot active"></span>
            <span class="dot "></span>
          </div>
          <button
            disabled={false}
            onClick={[Function bound handleComplete]}
            class="next-button skip-for-now"
            type="button"
          >
            Skip for now
          </button>
        </div>
      </nav>
      <div class="onboarding-content toggle-bottom">
        <header class="onboarding-content-header">
          <h1 class="title">Suggested people to follow</h1>
          <h2 class="subtitle">Let's review a few things first</h2>
        </header>
        <div class="onboarding-modal-scroll-container">
          <button
            type="button"
            onClick={[Function onClick]}
            onKeyDown={[Function onKeyDown]}
            class="user content-row unselected"
          >
            <figure class="user-avatar-container">
              <img
                class="user-avatar"
                src="ben.jpg"
                alt="profile"
               />
            </figure>
            <div class="user-info">
              <h4 class="user-name">Ben Halpern</h4>
              <p class="user-summary"></p>
            </div>
            <button
              type="button"
              class="user-following-status"
            >
              Follow
            </button>
          </button>
          <button
            type="button"
            onClick={[Function onClick]}
            onKeyDown={[Function onKeyDown]}
            class="user content-row unselected"
          >
            <figure class="user-avatar-container">
              <img
                class="user-avatar"
                src="clown.jpg"
                alt="profile"
               />
            </figure>
            <div class="user-info">
              <h4 class="user-name">Krusty the Clown</h4>
              <p class="user-summary"></p>
            </div>
            <button
              type="button"
              class="user-following-status"
            >
              Follow
            </button>
          </button>
          <button
            type="button"
            onClick={[Function onClick]}
            onKeyDown={[Function onKeyDown]}
            class="user content-row unselected"
          >
            <figure class="user-avatar-container">
              <img
                class="user-avatar"
                src="dev.jpg"
                alt="profile"
               />
            </figure>
            <div class="user-info">
              <h4 class="user-name">dev.to staff</h4>
              <p class="user-summary"></p>
            </div>
            <button
              type="button"
              class="user-following-status"
            >
              Follow
            </button>
          </button>
        </div>
      </div>
      <div class="onboarding-selection-status">
        <div class="selection-status-content">
          <p class="follow-count-message">You're not following anyone</p>
          <button
            type="button"
            onClick={[Function onClick]}
          >
            Select all 3 people
          </button>
        </div>
      </div>
    </div>
  </div>
</main>

`;

exports[`<Onboarding /> IntroSlide renders properly 1`] = `
preact-render-spy (1 nodes)
-------
<main class="onboarding-body">
  <div class="onboarding-main introduction crayons-modal crayons-modal--m">
    <div class="crayons-modal__box overflow-auto">
      <div class="onboarding-content">
        <figure>
          <img
            src="/assets/purple-dev-logo.png"
            class="sticker-logo"
            alt="DEV"
           />
        </figure>
        <h1 class="introduction-title">firstname lastname— welcome to Test!</h1>
        <h2 class="introduction-subtitle">Wouldn't you like to knoww..</h2>
      </div>
      <div class="checkbox-form-wrapper">
        <form class="checkbox-form">
          <fieldset>
            <ul>
              <li class="checkbox-item">
                <label htmlFor="checked_code_of_conduct">
                  <input
                    type="checkbox"
                    id="checked_code_of_conduct"
                    name="checked_code_of_conduct"
                    checked={false}
                    onChange={[Function bound handleChange]}
                   />
                  You agree to uphold our 
                  <a
                    href="/code-of-conduct"
                    data-no-instant={true}
                    onClick={[Function onClick]}
                  >
                    Code of Conduct
                  </a>
                  .
                </label>
              </li>
              <li class="checkbox-item">
                <label htmlFor="checked_terms_and_conditions">
                  <input
                    type="checkbox"
                    id="checked_terms_and_conditions"
                    name="checked_terms_and_conditions"
                    checked={false}
                    onChange={[Function bound handleChange]}
                   />
                  You agree to our 
                  <a
                    href="/terms"
                    data-no-instant={true}
                    onClick={[Function onClick]}
                  >
                    Terms and Conditions
                  </a>
                  .
                </label>
              </li>
            </ul>
          </fieldset>
        </form>
        <nav class="onboarding-navigation intro-slide">
          <div class="navigation-content intro-slide">
            <button
              disabled={true}
              onClick={[Function bound onSubmit]}
              class="next-button"
              type="button"
            >
              Continue
            </button>
          </div>
        </nav>
      </div>
    </div>
  </div>
</main>

`;

exports[`<Onboarding /> ProfileForm renders properly 1`] = `
preact-render-spy (1 nodes)
-------
<main class="onboarding-body">
  <div class="onboarding-main crayons-modal">
    <div class="crayons-modal__box">
      <nav class="onboarding-navigation">
        <div class="navigation-content">
          <div class="back-button-container">
            <button
              onClick={[Function bound prevSlide]}
              class="back-button"
              type="button"
            >
              <svg
                width="24"
                height="24"
                fill="none"
                class="crayons-icon"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414L7.828 11z"></path>
              </svg>
            </button>
          </div>
          <div class="stepper">
            <span class="dot active"></span>
            <span class="dot active"></span>
            <span class="dot "></span>
            <span class="dot "></span>
          </div>
          <button
            disabled={false}
            onClick={[Function bound onSubmit]}
            class="next-button skip-for-now"
            type="button"
          >
            Skip for now
          </button>
        </div>
      </nav>
      <div class="onboarding-content about">
        <header class="onboarding-content-header">
          <h1 class="title">Build your profile</h1>
          <h2 class="subtitle">
            Tell us a little bit about yourself — this is how others will see you on Test. You’ll always be able to edit this later in your Settings.
          </h2>
        </header>
        <div class="current-user-info">
          <figure class="current-user-avatar-container">
            <img
              class="current-user-avatar"
              alt="profile"
              src="mock_url_link"
             />
          </figure>
          <h3>firstname lastname</h3>
          <p>username</p>
        </div>
        <form>
          <label htmlFor="summary">
            Bio
            <textarea
              name="summary"
              id="summary"
              placeholder="Tell us about yourself"
              onChange={[Function bound handleChange]}
              maxLength="120"
            >
            </textarea>
          </label>
          <label htmlFor="location">
            Where are you located?
            <input
              type="text"
              name="location"
              id="location"
              placeholder="e.g. New York, NY"
              onChange={[Function bound handleChange]}
              maxLength="60"
             />
          </label>
          <label htmlFor="employment_title">
            What is your title?
            <input
              type="text"
              name="employment_title"
              id="employment_title"
              placeholder="e.g. Software Engineer"
              onChange={[Function bound handleChange]}
              maxLength="60"
             />
          </label>
          <label htmlFor="employer_name">
            Where do you work?
            <input
              type="text"
              name="employer_name"
              id="employer_name"
              placeholder="e.g. Company name, self-employed, etc."
              onChange={[Function bound handleChange]}
              maxLength="60"
              class="onboarding-form-input--last"
             />
          </label>
        </form>
      </div>
    </div>
  </div>
</main>

`;
