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

exports[`renders comment stream 1`] = `
<div
  className="Box-root HorizontalGutter-root coral coral-stream App-root HorizontalGutter-full"
>
  <nav>
    <h2
      className="AriaInfo-root"
    >
      Navigation
    </h2>
    <ul
      className="TabBar-root TabBar-primary coral coral-tabBar"
      role="tablist"
    >
      <li
        className="Tab-root"
        id="tab-COMMENTS"
        role="presentation"
      >
        <button
          aria-controls="tabPane-COMMENTS"
          aria-selected={true}
          className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-comments"
          onBlur={[Function]}
          onClick={[Function]}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          onTouchEnd={[Function]}
          role="tab"
          type="button"
        >
          <span>
            Comments
          </span>
        </button>
      </li>
    </ul>
  </nav>
  <main>
    <section
      aria-labelledby="tab-COMMENTS"
      className="App-tabContent coral coral-comments"
      data-testid="current-tab-pane"
      id="tabPane-COMMENTS"
      role="tabpanel"
    >
      <div
        className="Box-root HorizontalGutter-root StreamContainer-root coral coral-unauthenticated HorizontalGutter-double"
      >
        <div
          className="Box-root Flex-root coral coral-viewerBox Flex-flex Flex-itemGutter Flex-alignCenter gutter"
        >
          <button
            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined coral coral-viewerBox-signInButton"
            data-color="primary"
            data-variant="underlined"
            onBlur={[Function]}
            onClick={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="button"
          >
            Sign in
          </button>
          <button
            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined coral coral-viewerBox-registerButton"
            data-color="primary"
            data-variant="outlined"
            onBlur={[Function]}
            onClick={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="button"
          >
            Register
          </button>
        </div>
        <div
          className="coral coral-createComment"
        >
          <div
            className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
          >
            <div>
              <div>
                <div
                  className="$root content placeholder toolbar"
                  onBlur={[Function]}
                  onFocus={[Function]}
                >
                  <div
                    className="RTE-contentEditableContainer"
                  >
                    <div
                      aria-placeholder="Post a comment"
                      className="RTE-contentEditable coral coral-rte-content RTE-content"
                      contentEditable={true}
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "",
                        }
                      }
                      onBlur={[Function]}
                      onChange={[Function]}
                      onCut={[Function]}
                      onFocus={[Function]}
                      onInput={[Function]}
                      onKeyDown={[Function]}
                      onPaste={[Function]}
                      onSelect={[Function]}
                    />
                    <div
                      aria-hidden="true"
                      className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
                    >
                      Post a comment
                    </div>
                  </div>
                  <div
                    className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
                  >
                    <button
                      className="Button-button"
                      disabled={false}
                      onClick={[Function]}
                      title="Bold"
                      type="button"
                    >
                      <i
                        aria-hidden="true"
                        className="Icon-root Icon-md"
                      >
                        format_bold
                      </i>
                    </button>
                    <button
                      className="Button-button"
                      disabled={false}
                      onClick={[Function]}
                      title="Italic"
                      type="button"
                    >
                      <i
                        aria-hidden="true"
                        className="Icon-root Icon-md"
                      >
                        format_italic
                      </i>
                    </button>
                    <button
                      className="Button-button"
                      disabled={false}
                      onClick={[Function]}
                      title="Blockquote"
                      type="button"
                    >
                      <i
                        aria-hidden="true"
                        className="Icon-root Icon-md"
                      >
                        format_quote
                      </i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <button
              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
              data-color="primary"
              data-variant="filled"
              onBlur={[Function]}
              onClick={[Function]}
              onFocus={[Function]}
              onMouseOut={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              type="submit"
            >
              Sign in and Join the Conversation
            </button>
          </div>
        </div>
        <div
          className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
        >
          <div
            className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
          >
            <div
              className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
            >
              <label
                className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
                htmlFor="coral-comments-sortMenu"
              >
                Sort By
              </label>
              <span
                className="SelectField-root"
              >
                <select
                  className="SelectField-select undefined"
                  id="coral-comments-sortMenu"
                  onBlur={[Function]}
                  onChange={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  value="CREATED_AT_DESC"
                >
                  <option
                    value="CREATED_AT_DESC"
                  >
                    Newest
                  </option>
                  <option
                    value="CREATED_AT_ASC"
                  >
                    Oldest
                  </option>
                  <option
                    value="REPLIES_DESC"
                  >
                    Most Replies
                  </option>
                  <option
                    value="REACTION_DESC"
                  >
                    Most Respected
                  </option>
                </select>
                <span
                  aria-hidden={true}
                  className="SelectField-afterWrapper undefined"
                >
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-sm"
                  >
                    expand_more
                  </i>
                </span>
              </span>
            </div>
            <ul
              className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
              role="tablist"
            >
              <div
                className="StreamContainer-featuredCommentsTabContainer"
              >
                <li
                  className="Tab-root"
                  id="tab-FEATURED_COMMENTS"
                  role="presentation"
                >
                  <button
                    aria-controls="tabPane-FEATURED_COMMENTS"
                    aria-selected={true}
                    className="BaseButton-root Tab-button Tab-secondary StreamContainer-featuredCommentsTabButton Tab-active StreamContainer-fixedTab coral coral-tabBarSecondary-tab coral-tabBarComments-featured StreamContainer-featuredCommentsTab"
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    role="tab"
                    type="button"
                  >
                    <div
                      className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
                    >
                      <span>
                        Featured
                      </span>
                      <span
                        className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
                        data-testid="comments-featuredCount"
                      >
                        <span
                          className="Counter-text"
                        >
                          2
                        </span>
                      </span>
                    </div>
                  </button>
                </li>
                <div
                  className="Popover-root Tooltip-root StreamContainer-featuredCommentsInfo coral coral-tabBarComments-featuredTooltip"
                >
                  <button
                    aria-label="Toggle featured comments tooltip"
                    className="BaseButton-root TooltipButton-button"
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="button"
                  >
                    <i
                      aria-hidden="true"
                      className="Icon-root Icon-sm Icon-colorPrimary"
                    >
                      info
                    </i>
                  </button>
                  <div
                    aria-hidden={true}
                    aria-labelledby="comments-featuredCommentPopover-ariainfo"
                    id="comments-featuredCommentPopover"
                    role="dialog"
                  />
                </div>
              </div>
              <li
                className="Tab-root"
                id="tab-ALL_COMMENTS"
                role="presentation"
              >
                <button
                  aria-controls="tabPane-ALL_COMMENTS"
                  aria-selected={false}
                  className="BaseButton-root Tab-button Tab-secondary StreamContainer-fixedTab coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  role="tab"
                  type="button"
                >
                  <div
                    className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
                  >
                    <span>
                      All Comments
                    </span>
                    <span
                      className="Counter-root Counter-colorGrey Counter-sizeSmall coral coral-counter"
                    >
                      <span
                        className="Counter-text"
                      >
                        2
                      </span>
                    </span>
                  </div>
                </button>
              </li>
            </ul>
          </div>
          <section
            aria-labelledby="tab-FEATURED_COMMENTS"
            className="coral coral-featuredComments"
            id="tabPane-FEATURED_COMMENTS"
            role="tabpanel"
          >
            <div
              aria-live="polite"
              className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
              data-testid="comments-featuredComments-log"
              id="comments-featuredComments-log"
              role="log"
            >
              <div
                className="coral coral-featuredComment FeaturedCommentContainer-root"
                data-testid="featuredComment-comment-0"
              >
                <div
                  className="HTMLContent-root coral coral-content coral-featuredComment-content"
                  dangerouslySetInnerHTML={
                    Object {
                      "__html": "Joining Too",
                    }
                  }
                />
                <div
                  className="Box-root Flex-root coral coral-featuredComment-authorBar Flex-flex Flex-alignCenter Flex-directionRow Box-mt-4"
                >
                  <div
                    className="Popover-root"
                  >
                    <button
                      aria-controls="username-popover-comment-0"
                      className="BaseButton-root coral coral-username coral-comment-username"
                      onBlur={[Function]}
                      onClick={[Function]}
                      onFocus={[Function]}
                      onMouseOut={[Function]}
                      onMouseOver={[Function]}
                      onTouchEnd={[Function]}
                      type="button"
                    >
                      <span
                        className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                      >
                        Markus
                      </span>
                    </button>
                    <div
                      aria-hidden={true}
                      aria-labelledby="username-popover-comment-0-ariainfo"
                      id="username-popover-comment-0"
                      role="dialog"
                    >
                      <div
                        className="AriaInfo-root"
                        id="username-popover-comment-0-ariainfo"
                      >
                        A popover with more user information
                      </div>
                    </div>
                  </div>
                  <span
                    className="Box-root Box-ml-1"
                  />
                  <button
                    className="BaseButton-root Timestamp-root"
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="button"
                  >
                    <time
                      className="RelativeTime-root Timestamp-text Box-root Box-ml-2"
                      dateTime="2018-07-06T18:24:00.000Z"
                      title="2018-07-06T18:24:00.000Z"
                    >
                      2018-07-06T18:24:00.000Z
                    </time>
                  </button>
                </div>
                <div
                  className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
                >
                  <button
                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-featuredComment-reactButton ReactionButton-button"
                    data-color="primary"
                    data-variant="textUnderlined"
                    disabled={false}
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="button"
                  >
                    <span>
                      Respect
                    </span>
                  </button>
                  <div
                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
                  >
                    <div>
                      <a
                        className="TextLink-root coral coral-featuredComment-goToConversationButton FeaturedCommentContainer-gotoConversation"
                        href="http://localhost/stories/story-with-featured-comments?commentID=comment-0"
                        onClick={[Function]}
                      >
                        <span>
                          Go to Conversation
                        </span>
                        <span
                          className="FeaturedCommentContainer-gotoArrow"
                        >
                          &gt;
                        </span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="coral coral-featuredComment FeaturedCommentContainer-root"
                data-testid="featuredComment-comment-1"
              >
                <div
                  className="HTMLContent-root coral coral-content coral-featuredComment-content"
                  dangerouslySetInnerHTML={
                    Object {
                      "__html": "What's up?",
                    }
                  }
                />
                <div
                  className="Box-root Flex-root coral coral-featuredComment-authorBar Flex-flex Flex-alignCenter Flex-directionRow Box-mt-4"
                >
                  <div
                    className="Popover-root"
                  >
                    <button
                      aria-controls="username-popover-comment-1"
                      className="BaseButton-root coral coral-username coral-comment-username"
                      onBlur={[Function]}
                      onClick={[Function]}
                      onFocus={[Function]}
                      onMouseOut={[Function]}
                      onMouseOver={[Function]}
                      onTouchEnd={[Function]}
                      type="button"
                    >
                      <span
                        className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                      >
                        Lukas
                      </span>
                    </button>
                    <div
                      aria-hidden={true}
                      aria-labelledby="username-popover-comment-1-ariainfo"
                      id="username-popover-comment-1"
                      role="dialog"
                    >
                      <div
                        className="AriaInfo-root"
                        id="username-popover-comment-1-ariainfo"
                      >
                        A popover with more user information
                      </div>
                    </div>
                  </div>
                  <span
                    className="Box-root Box-ml-1"
                  />
                  <button
                    className="BaseButton-root Timestamp-root"
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="button"
                  >
                    <time
                      className="RelativeTime-root Timestamp-text Box-root Box-ml-2"
                      dateTime="2018-07-06T18:24:00.000Z"
                      title="2018-07-06T18:24:00.000Z"
                    >
                      2018-07-06T18:24:00.000Z
                    </time>
                  </button>
                </div>
                <div
                  className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
                >
                  <button
                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-featuredComment-reactButton ReactionButton-button"
                    data-color="primary"
                    data-variant="textUnderlined"
                    disabled={false}
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="button"
                  >
                    <span>
                      Respect
                    </span>
                  </button>
                  <div
                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
                  >
                    <div>
                      <a
                        className="TextLink-root coral coral-featuredComment-goToConversationButton FeaturedCommentContainer-gotoConversation"
                        href="http://localhost/stories/story-with-featured-comments?commentID=comment-1"
                        onClick={[Function]}
                      >
                        <span>
                          Go to Conversation
                        </span>
                        <span
                          className="FeaturedCommentContainer-gotoArrow"
                        >
                          &gt;
                        </span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </section>
  </main>
</div>
`;
