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

exports[`renders message box when commenting disabled 1`] = `
<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="Box-root HorizontalGutter-root HorizontalGutter-double"
    >
      <div
        className="CallOut-root CallOut-colorRegular CallOut-fullWidth PostCommentFormClosedSitewide-root coral coral-closedSitewide"
      >
        <div
          className="CallOut-inner"
        >
          <div
            className="Markdown-root PostCommentFormClosedSitewide-message"
            dangerouslySetInnerHTML={
              Object {
                "__html": "<p>Commenting disabled</p>
",
              }
            }
          />
        </div>
      </div>
      <div
        className="coral coral-createComment"
      >
        <div
          className="MessageBox-root coral coral-createComment-message"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-md MessageBoxIcon-root"
          >
            chat
          </i>
          <div
            className="Markdown-root MessageBoxContent-root MessageBoxContainer-withIcon"
            dangerouslySetInnerHTML={
              Object {
                "__html": "<p><strong>What do you think</strong>?</p>
",
              }
            }
          />
        </div>
      </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"
        >
          <li
            className="Tab-root"
            id="tab-ALL_COMMENTS"
            role="presentation"
          >
            <button
              aria-controls="tabPane-ALL_COMMENTS"
              aria-selected={true}
              className="BaseButton-root Tab-button Tab-secondary Tab-active 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-colorPrimary Counter-sizeSmall coral coral-counter"
                >
                  <span
                    className="Counter-text"
                  >
                    0
                  </span>
                </span>
              </div>
            </button>
          </li>
        </ul>
      </div>
      <section
        aria-labelledby="tab-ALL_COMMENTS"
        className="coral coral-allComments"
        id="tabPane-ALL_COMMENTS"
        role="tabpanel"
      >
        <div
          aria-live="polite"
          className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
          data-testid="comments-allComments-log"
          id="comments-allComments-log"
          role="log"
        >
          <div
            className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
          >
            <div
              className="CallOut-inner"
            >
              There are no comments yet. Why don't you write one?
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</section>
`;

exports[`renders message box when logged in 1`] = `
<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-authenticated HorizontalGutter-double"
  >
    <div
      className="Box-root Flex-root coral coral-viewerBox"
    >
      <div
        className="Flex-flex Flex-halfItemGutter Flex-wrap gutter"
      >
        <div
          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText"
        >
          Signed in as 
          <span
            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
          >
            Markus
          </span>
          .
        </div>
        <div
          className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText Flex-flex"
        >
          <span>
            Not you? 
          </span>
          <button
            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular UserBoxAuthenticated-userBoxButton coral coral-viewerBox-logoutButton"
            data-color="primary"
            data-variant="regular"
            onBlur={[Function]}
            onClick={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="button"
          >
            Sign Out
          </button>
        </div>
      </div>
    </div>
    <div
      className="coral coral-createComment"
    >
      <div
        className="MessageBox-root coral coral-createComment-message PostCommentForm-messageBox"
      >
        <i
          aria-hidden="true"
          className="Icon-root Icon-md MessageBoxIcon-root"
        >
          chat
        </i>
        <div
          className="Markdown-root MessageBoxContent-root MessageBoxContainer-withIcon"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<p><strong>What do you think</strong>?</p>
",
            }
          }
        />
      </div>
      <form
        autoComplete="off"
        id="comments-postCommentForm-form"
        onSubmit={[Function]}
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-full"
        >
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-half"
          >
            <label
              className="AriaInfo-root"
              htmlFor="comments-postCommentForm-field"
            >
              Post a comment
            </label>
            <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 PostCommentForm-rteBorderless RTE-content"
                    contentEditable={true}
                    dangerouslySetInnerHTML={
                      Object {
                        "__html": "",
                      }
                    }
                    disabled={false}
                    id="comments-postCommentForm-field"
                    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>
          <div
            className="Box-root Flex-root Flex-flex Flex-alignFlexEnd Flex-directionColumn"
          >
            <button
              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-createComment-submit"
              data-color="primary"
              data-variant="filled"
              disabled={true}
              onBlur={[Function]}
              onFocus={[Function]}
              onMouseOut={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              type="submit"
            >
              Submit
            </button>
          </div>
        </div>
      </form>
    </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"
        >
          <li
            className="Tab-root"
            id="tab-ALL_COMMENTS"
            role="presentation"
          >
            <button
              aria-controls="tabPane-ALL_COMMENTS"
              aria-selected={true}
              className="BaseButton-root Tab-button Tab-secondary Tab-active 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-colorPrimary Counter-sizeSmall coral coral-counter"
                >
                  <span
                    className="Counter-text"
                  >
                    0
                  </span>
                </span>
              </div>
            </button>
          </li>
        </ul>
      </div>
      <section
        aria-labelledby="tab-ALL_COMMENTS"
        className="coral coral-allComments"
        id="tabPane-ALL_COMMENTS"
        role="tabpanel"
      >
        <div
          aria-live="polite"
          className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
          data-testid="comments-allComments-log"
          id="comments-allComments-log"
          role="log"
        >
          <div
            className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
          >
            <div
              className="CallOut-inner"
            >
              There are no comments yet. Why don't you write one?
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</section>
`;

exports[`renders message box when not logged in 1`] = `
<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="MessageBox-root coral coral-createComment-message PostCommentFormFake-messageBox"
      >
        <i
          aria-hidden="true"
          className="Icon-root Icon-md MessageBoxIcon-root"
        >
          chat
        </i>
        <div
          className="Markdown-root MessageBoxContent-root MessageBoxContainer-withIcon"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<p><strong>What do you think</strong>?</p>
",
            }
          }
        />
      </div>
      <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"
        >
          <li
            className="Tab-root"
            id="tab-ALL_COMMENTS"
            role="presentation"
          >
            <button
              aria-controls="tabPane-ALL_COMMENTS"
              aria-selected={true}
              className="BaseButton-root Tab-button Tab-secondary Tab-active 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-colorPrimary Counter-sizeSmall coral coral-counter"
                >
                  <span
                    className="Counter-text"
                  >
                    0
                  </span>
                </span>
              </div>
            </button>
          </li>
        </ul>
      </div>
      <section
        aria-labelledby="tab-ALL_COMMENTS"
        className="coral coral-allComments"
        id="tabPane-ALL_COMMENTS"
        role="tabpanel"
      >
        <div
          aria-live="polite"
          className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
          data-testid="comments-allComments-log"
          id="comments-allComments-log"
          role="log"
        >
          <div
            className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
          >
            <div
              className="CallOut-inner"
            >
              There are no comments yet. Why don't you write one?
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</section>
`;

exports[`renders message box when story isClosed 1`] = `
<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="MessageBox-root coral coral-createComment-message PostCommentFormClosed-messageBox"
      >
        <div
          className="Markdown-root MessageBoxContent-root MessageBoxContainer-withoutIcon"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<p><strong>What do you think</strong>?</p>
",
            }
          }
        />
      </div>
      <div
        className="CallOut-root CallOut-colorRegular CallOut-fullWidth coral coral-createComment-closed"
      >
        <div
          className="CallOut-inner"
        >
          <div
            className="Markdown-root"
            dangerouslySetInnerHTML={
              Object {
                "__html": "<p>Story is closed</p>
",
              }
            }
          />
        </div>
      </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"
        >
          <li
            className="Tab-root"
            id="tab-ALL_COMMENTS"
            role="presentation"
          >
            <button
              aria-controls="tabPane-ALL_COMMENTS"
              aria-selected={true}
              className="BaseButton-root Tab-button Tab-secondary Tab-active 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-colorPrimary Counter-sizeSmall coral coral-counter"
                >
                  <span
                    className="Counter-text"
                  >
                    0
                  </span>
                </span>
              </div>
            </button>
          </li>
        </ul>
      </div>
      <section
        aria-labelledby="tab-ALL_COMMENTS"
        className="coral coral-allComments"
        id="tabPane-ALL_COMMENTS"
        role="tabpanel"
      >
        <div
          aria-live="polite"
          className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
          data-testid="comments-allComments-log"
          id="comments-allComments-log"
          role="log"
        >
          <div
            className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
          >
            <div
              className="CallOut-inner"
            >
              There are no comments on this story.
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</section>
`;
