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

exports[`renders conversation thread 1`] = `
<div
  className="coral coral-conversationThread ConversationThreadContainer-root"
  data-testid="comments-permalinkView-conversationThread"
>
  <div
    className="Line-root Box-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
  >
    <div
      className="Circle-circleContainer"
    >
      <div
        className="Circle-circleSubContainer"
      >
        <svg
          className="Circle-circle"
          viewBox="0 0 100 100"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="50"
            cy="50"
            r="50"
          />
        </svg>
      </div>
      <div
        className="Box-root Flex-root coral coral-rootParent Flex-flex Flex-justifySpaceBetween Flex-directionRow"
        id="comment-from-staff-0"
      >
        <div
          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
        >
          <div
            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
          >
            <div>
              <span
                className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root coral coral-username coral-rootParent-username"
              >
                Moderator
              </span>
            </div>
            <span
              className="Tag-root coral coral-userTag coral-rootParent-userTag Tag-colorGrey Tag-uppercase"
            >
              Staff
            </span>
          </div>
          <div
            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
          >
            <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 coral coral-timestamp coral-rootParent-timestamp"
                dateTime="2018-07-06T18:24:00.000Z"
                title="2018-07-06T18:24:00.000Z"
              >
                2018-07-06T18:24:00.000Z
              </time>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      className="Circle-circleContainer ConversationThreadContainer-loadMore"
    >
      <div
        className="Circle-circleSubContainer"
      >
        <svg
          className="Circle-circle"
          viewBox="0 0 100 100"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="50"
            cy="50"
            fill="none"
            r="40"
            strokeWidth="8"
          />
        </svg>
      </div>
      <div
        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
      >
        <button
          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined coral coral-conversationThread-showMore ConversationThreadContainer-showMoreButton"
          data-color="regular"
          data-variant="underlined"
          disabled={false}
          onBlur={[Function]}
          onClick={[Function]}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          onTouchEnd={[Function]}
          type="button"
        >
          Show More of This Conversation
        </button>
        <span
          className="Counter-root Counter-colorDark coral coral-counter"
        >
          <span
            className="Counter-text"
          >
            2
          </span>
        </span>
      </div>
    </div>
  </div>
  <div
    className="Line-root Box-root HorizontalGutter-root HorizontalGutter-full"
  >
    <div
      className="Circle-circleContainer"
    >
      <div
        className="Circle-circleSubContainer Circle-end"
      >
        <svg
          className="Circle-circle"
          viewBox="0 0 100 100"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="50"
            cy="50"
            r="50"
          />
        </svg>
      </div>
      <div
        className="coral coral-comment coral coral-conversationThread-highlighted"
        data-testid="comment-comment-0"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-full"
        >
          <div
            className="Indent-root"
          >
            <div
              className=""
            >
              <div
                className="Box-root HorizontalGutter-root Comment-root Comment-highlight HorizontalGutter-half"
                role="article"
              >
                <div
                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                >
                  <div
                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                  >
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <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>
                    </div>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                    >
                      <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 coral coral-timestamp coral-comment-timestamp"
                          dateTime="2018-07-06T18:24:00.000Z"
                          title="2018-07-06T18:24:00.000Z"
                        >
                          2018-07-06T18:24:00.000Z
                        </time>
                      </button>
                    </div>
                  </div>
                  <div>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                    />
                  </div>
                </div>
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                >
                  <div
                    className="HTMLContent-root coral coral-content coral-comment-content"
                    dangerouslySetInnerHTML={
                      Object {
                        "__html": "Joining Too",
                      }
                    }
                  />
                  <div
                    className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                  >
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <button
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-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>
                      <button
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                        data-active={false}
                        data-color="primary"
                        data-variant="textUnderlined"
                        disabled={false}
                        id="comments-commentContainer-replyButton-comment-0"
                        onBlur={[Function]}
                        onClick={[Function]}
                        onFocus={[Function]}
                        onMouseOut={[Function]}
                        onMouseOver={[Function]}
                        onTouchEnd={[Function]}
                        type="button"
                      >
                        <span>
                          Reply
                        </span>
                      </button>
                      <div
                        className="Popover-root"
                      >
                        <button
                          aria-controls="permalink-popover-comment-0"
                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                          data-active={false}
                          data-color="primary"
                          data-variant="textUnderlined"
                          onBlur={[Function]}
                          onClick={[Function]}
                          onFocus={[Function]}
                          onMouseOut={[Function]}
                          onMouseOver={[Function]}
                          onTouchEnd={[Function]}
                          type="button"
                        >
                          <span>
                            Share
                          </span>
                        </button>
                        <div
                          aria-hidden={true}
                          aria-labelledby="permalink-popover-comment-0-ariainfo"
                          id="permalink-popover-comment-0"
                          role="dialog"
                        >
                          <div
                            className="AriaInfo-root"
                            id="permalink-popover-comment-0-ariainfo"
                          >
                            A dialog showing a permalink to the comment
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <button
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                        data-color="error"
                        data-variant="textUnderlined"
                        disabled={false}
                        onBlur={[Function]}
                        onClick={[Function]}
                        onFocus={[Function]}
                        onMouseOut={[Function]}
                        onMouseOver={[Function]}
                        onTouchEnd={[Function]}
                        type="button"
                      >
                        <span>
                          Report
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`shows more of this conversation 1`] = `
<div
  className="coral coral-conversationThread ConversationThreadContainer-root"
  data-testid="comments-permalinkView-conversationThread"
>
  <div
    className="Line-root Box-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
  />
  <div
    className="Line-root Box-root HorizontalGutter-root HorizontalGutter-full"
  >
    <div
      className="Circle-circleContainer"
    >
      <div
        className="Circle-circleSubContainer"
      >
        <svg
          className="Circle-circle"
          viewBox="0 0 100 100"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="50"
            cy="50"
            r="50"
          />
        </svg>
      </div>
      <div
        className="coral coral-comment"
        data-testid="comment-comment-1"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-full"
        >
          <div
            className="Indent-root"
          >
            <div
              className=""
            >
              <div
                className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                role="article"
              >
                <div
                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                >
                  <div
                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                  >
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <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>
                    </div>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                    >
                      <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 coral coral-timestamp coral-comment-timestamp"
                          dateTime="2018-07-06T18:24:00.000Z"
                          title="2018-07-06T18:24:00.000Z"
                        >
                          2018-07-06T18:24:00.000Z
                        </time>
                      </button>
                    </div>
                  </div>
                  <div>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                    />
                  </div>
                </div>
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                >
                  <div
                    className="HTMLContent-root coral coral-content coral-comment-content"
                    dangerouslySetInnerHTML={
                      Object {
                        "__html": "What's up?",
                      }
                    }
                  />
                  <div
                    className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                  >
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <button
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-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>
                      <button
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                        data-active={false}
                        data-color="primary"
                        data-variant="textUnderlined"
                        disabled={false}
                        id="comments-commentContainer-replyButton-comment-1"
                        onBlur={[Function]}
                        onClick={[Function]}
                        onFocus={[Function]}
                        onMouseOut={[Function]}
                        onMouseOver={[Function]}
                        onTouchEnd={[Function]}
                        type="button"
                      >
                        <span>
                          Reply
                        </span>
                      </button>
                      <div
                        className="Popover-root"
                      >
                        <button
                          aria-controls="permalink-popover-comment-1"
                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                          data-active={false}
                          data-color="primary"
                          data-variant="textUnderlined"
                          onBlur={[Function]}
                          onClick={[Function]}
                          onFocus={[Function]}
                          onMouseOut={[Function]}
                          onMouseOver={[Function]}
                          onTouchEnd={[Function]}
                          type="button"
                        >
                          <span>
                            Share
                          </span>
                        </button>
                        <div
                          aria-hidden={true}
                          aria-labelledby="permalink-popover-comment-1-ariainfo"
                          id="permalink-popover-comment-1"
                          role="dialog"
                        >
                          <div
                            className="AriaInfo-root"
                            id="permalink-popover-comment-1-ariainfo"
                          >
                            A dialog showing a permalink to the comment
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <button
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                        data-color="error"
                        data-variant="textUnderlined"
                        disabled={false}
                        onBlur={[Function]}
                        onClick={[Function]}
                        onFocus={[Function]}
                        onMouseOut={[Function]}
                        onMouseOver={[Function]}
                        onTouchEnd={[Function]}
                        type="button"
                      >
                        <span>
                          Report
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      className="Circle-circleContainer"
    >
      <div
        className="Circle-circleSubContainer"
      >
        <svg
          className="Circle-circle"
          viewBox="0 0 100 100"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="50"
            cy="50"
            fill="none"
            r="40"
            strokeWidth="8"
          />
        </svg>
      </div>
      <div
        className="coral coral-comment"
        data-testid="comment-comment-from-staff-0"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-full"
        >
          <div
            className="Indent-root"
          >
            <div
              className=""
            >
              <div
                className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                role="article"
              >
                <div
                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                >
                  <div
                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                  >
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <div
                        className="Popover-root"
                      >
                        <button
                          aria-controls="username-popover-comment-from-staff-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"
                          >
                            Moderator
                          </span>
                        </button>
                        <div
                          aria-hidden={true}
                          aria-labelledby="username-popover-comment-from-staff-0-ariainfo"
                          id="username-popover-comment-from-staff-0"
                          role="dialog"
                        >
                          <div
                            className="AriaInfo-root"
                            id="username-popover-comment-from-staff-0-ariainfo"
                          >
                            A popover with more user information
                          </div>
                        </div>
                      </div>
                      <span
                        className="Tag-root coral coral-userTag coral-comment-userTag Tag-colorGrey Tag-uppercase"
                      >
                        Staff
                      </span>
                    </div>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                    >
                      <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 coral coral-timestamp coral-comment-timestamp"
                          dateTime="2018-07-06T18:24:00.000Z"
                          title="2018-07-06T18:24:00.000Z"
                        >
                          2018-07-06T18:24:00.000Z
                        </time>
                      </button>
                    </div>
                  </div>
                  <div>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                    />
                  </div>
                </div>
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                >
                  <div
                    className="HTMLContent-root coral coral-content coral-comment-content"
                    dangerouslySetInnerHTML={
                      Object {
                        "__html": "Joining Too",
                      }
                    }
                  />
                  <div
                    className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                  >
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <button
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-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>
                      <button
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                        data-active={false}
                        data-color="primary"
                        data-variant="textUnderlined"
                        disabled={false}
                        id="comments-commentContainer-replyButton-comment-from-staff-0"
                        onBlur={[Function]}
                        onClick={[Function]}
                        onFocus={[Function]}
                        onMouseOut={[Function]}
                        onMouseOver={[Function]}
                        onTouchEnd={[Function]}
                        type="button"
                      >
                        <span>
                          Reply
                        </span>
                      </button>
                      <div
                        className="Popover-root"
                      >
                        <button
                          aria-controls="permalink-popover-comment-from-staff-0"
                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                          data-active={false}
                          data-color="primary"
                          data-variant="textUnderlined"
                          onBlur={[Function]}
                          onClick={[Function]}
                          onFocus={[Function]}
                          onMouseOut={[Function]}
                          onMouseOver={[Function]}
                          onTouchEnd={[Function]}
                          type="button"
                        >
                          <span>
                            Share
                          </span>
                        </button>
                        <div
                          aria-hidden={true}
                          aria-labelledby="permalink-popover-comment-from-staff-0-ariainfo"
                          id="permalink-popover-comment-from-staff-0"
                          role="dialog"
                        >
                          <div
                            className="AriaInfo-root"
                            id="permalink-popover-comment-from-staff-0-ariainfo"
                          >
                            A dialog showing a permalink to the comment
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <button
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                        data-color="error"
                        data-variant="textUnderlined"
                        disabled={false}
                        onBlur={[Function]}
                        onClick={[Function]}
                        onFocus={[Function]}
                        onMouseOut={[Function]}
                        onMouseOver={[Function]}
                        onTouchEnd={[Function]}
                        type="button"
                      >
                        <span>
                          Report
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      className="Circle-circleContainer"
    >
      <div
        className="Circle-circleSubContainer Circle-end"
      >
        <svg
          className="Circle-circle"
          viewBox="0 0 100 100"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="50"
            cy="50"
            r="50"
          />
        </svg>
      </div>
      <div
        className="coral coral-comment coral coral-conversationThread-highlighted"
        data-testid="comment-comment-0"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-full"
        >
          <div
            className="Indent-root"
          >
            <div
              className=""
            >
              <div
                className="Box-root HorizontalGutter-root Comment-root Comment-highlight HorizontalGutter-half"
                role="article"
              >
                <div
                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                >
                  <div
                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                  >
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <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>
                    </div>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                    >
                      <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 coral coral-timestamp coral-comment-timestamp"
                          dateTime="2018-07-06T18:24:00.000Z"
                          title="2018-07-06T18:24:00.000Z"
                        >
                          2018-07-06T18:24:00.000Z
                        </time>
                      </button>
                    </div>
                  </div>
                  <div>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                    />
                  </div>
                </div>
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                >
                  <div
                    className="HTMLContent-root coral coral-content coral-comment-content"
                    dangerouslySetInnerHTML={
                      Object {
                        "__html": "Joining Too",
                      }
                    }
                  />
                  <div
                    className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                  >
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <button
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-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>
                      <button
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                        data-active={false}
                        data-color="primary"
                        data-variant="textUnderlined"
                        disabled={false}
                        id="comments-commentContainer-replyButton-comment-0"
                        onBlur={[Function]}
                        onClick={[Function]}
                        onFocus={[Function]}
                        onMouseOut={[Function]}
                        onMouseOver={[Function]}
                        onTouchEnd={[Function]}
                        type="button"
                      >
                        <span>
                          Reply
                        </span>
                      </button>
                      <div
                        className="Popover-root"
                      >
                        <button
                          aria-controls="permalink-popover-comment-0"
                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                          data-active={false}
                          data-color="primary"
                          data-variant="textUnderlined"
                          onBlur={[Function]}
                          onClick={[Function]}
                          onFocus={[Function]}
                          onMouseOut={[Function]}
                          onMouseOver={[Function]}
                          onTouchEnd={[Function]}
                          type="button"
                        >
                          <span>
                            Share
                          </span>
                        </button>
                        <div
                          aria-hidden={true}
                          aria-labelledby="permalink-popover-comment-0-ariainfo"
                          id="permalink-popover-comment-0"
                          role="dialog"
                        >
                          <div
                            className="AriaInfo-root"
                            id="permalink-popover-comment-0-ariainfo"
                          >
                            A dialog showing a permalink to the comment
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                    >
                      <button
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                        data-color="error"
                        data-variant="textUnderlined"
                        disabled={false}
                        onBlur={[Function]}
                        onClick={[Function]}
                        onFocus={[Function]}
                        onMouseOut={[Function]}
                        onMouseOver={[Function]}
                        onTouchEnd={[Function]}
                        type="button"
                      >
                        <span>
                          Report
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
