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

exports[`renders community 1`] = `
<div
  className="MainLayout-root Community-root"
  data-testid="community-container"
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-double"
  >
    <div
      className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd"
    >
      <div
        className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
      >
        <fieldset
          className="FieldSet-root"
        >
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
          >
            <label
              className="Label-root"
            >
              Search
            </label>
            <form
              autoComplete="off"
              id="configure-form"
              onSubmit={[Function]}
            >
              <div
                className="TextField-root UserTableFilter-textField"
              >
                <input
                  aria-label="Search by username or email address"
                  className="TextField-input TextField-colorDark TextField-seamlessAdornment"
                  name="search"
                  onBlur={[Function]}
                  onChange={[Function]}
                  onFocus={[Function]}
                  placeholder="Search by username or email address..."
                  type="text"
                  value=""
                />
                <div
                  className="TextField-adornment"
                >
                  <button
                    aria-label="Search"
                    className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantRegular Button-uppercase Button-adornmentRight UserTableFilter-adornment"
                    data-color="dark"
                    data-variant="regular"
                    onBlur={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="submit"
                  >
                    <i
                      aria-hidden="true"
                      className="Icon-root Icon-md"
                    >
                      search
                    </i>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </fieldset>
        <fieldset
          className="FieldSet-root"
        >
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
          >
            <label
              className="Label-root"
            >
              Show Me
            </label>
            <div
              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
            >
              <span
                className="SelectField-root UserTableFilter-selectField"
              >
                <select
                  aria-label="Search by role"
                  className="SelectField-select"
                  onBlur={[Function]}
                  onChange={[Function]}
                  onFocus={[Function]}
                  value=""
                >
                  <option
                    value=""
                  >
                    All Roles
                  </option>
                  <optgroup
                    label="Audience"
                  >
                    <option
                      value="COMMENTER"
                    >
                      Commenters
                    </option>
                  </optgroup>
                  <optgroup
                    label="Organization"
                  >
                    <option
                      value="ADMIN"
                    >
                      Admins
                    </option>
                    <option
                      value="MODERATOR"
                    >
                      Moderators
                    </option>
                    <option
                      value="STAFF"
                    >
                      Staff
                    </option>
                  </optgroup>
                </select>
                <span
                  aria-hidden={true}
                  className="SelectField-afterWrapper"
                >
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-sm"
                  >
                    expand_more
                  </i>
                </span>
              </span>
              <span
                className="SelectField-root UserTableFilter-selectField"
              >
                <select
                  aria-label="Search by user status"
                  className="SelectField-select"
                  onBlur={[Function]}
                  onChange={[Function]}
                  onFocus={[Function]}
                  value=""
                >
                  <option
                    value=""
                  >
                    All Statuses
                  </option>
                  <option
                    value="ACTIVE"
                  >
                    Active
                  </option>
                  <option
                    value="SUSPENDED"
                  >
                    Suspended
                  </option>
                  <option
                    value="BANNED"
                  >
                    Banned
                  </option>
                  <option
                    value="PREMOD"
                  >
                    Always pre-moderate
                  </option>
                </select>
                <span
                  aria-hidden={true}
                  className="SelectField-afterWrapper"
                >
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-sm"
                  >
                    expand_more
                  </i>
                </span>
              </span>
            </div>
          </div>
        </fieldset>
      </div>
      <div
        data-testid="invite-users"
      >
        <button
          className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantFlat Button-uppercase InviteUsers-button"
          data-color="dark"
          data-testid="invite-users-button"
          data-variant="flat"
          onBlur={[Function]}
          onClick={[Function]}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          onTouchEnd={[Function]}
          type="button"
        >
          Invite
        </button>
      </div>
    </div>
    <div
      className="Box-root HorizontalGutter-root HorizontalGutter-double"
    >
      <table
        className="Table-root Table-fullWidth"
      >
        <thead
          className="TableHead-root"
        >
          <tr
            className="TableRow-root"
          >
            <th
              className="TableCell-root UserTable-usernameColumn TableCell-header"
            >
              Username
            </th>
            <th
              className="TableCell-root UserTable-emailColumn TableCell-header"
            >
              Email
            </th>
            <th
              className="TableCell-root UserTable-memberSinceColumn TableCell-header"
            >
              Member Since
            </th>
            <th
              className="TableCell-root UserTable-roleColumn TableCell-header"
            >
              Role
            </th>
            <th
              className="TableCell-root UserTable-statusColumn TableCell-header"
            >
              Status
            </th>
          </tr>
        </thead>
        <tbody
          className="TableBody-root"
        >
          <tr
            className="TableRow-root TableRow-body"
          >
            <td
              className="TableCell-root UserRow-usernameColumn TableCell-body"
            >
              <button
                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserRow-usernameButton"
                data-color="mono"
                data-variant="text"
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onMouseOut={[Function]}
                onMouseOver={[Function]}
                onTouchEnd={[Function]}
                type="button"
              >
                Markus
              </button>
            </td>
            <td
              className="TableCell-root UserRow-emailColumn TableCell-body"
            >
              <a
                className="TextLink-root"
                href="mailto:markus@test.com"
              >
                markus@test.com
              </a>
            </td>
            <td
              className="TableCell-root UserRow-memberSinceColumn TableCell-body"
            >
              07/06/2018
            </td>
            <td
              className="TableCell-root UserRow-roleColumn TableCell-body"
            >
              <div
                className="ButtonPadding-root"
              >
                <span
                  className="UserRoleText-root"
                >
                  Admin
                </span>
              </div>
            </td>
            <td
              className="TableCell-root UserRow-statusColumn TableCell-body"
            >
              <div
                className="UserStatus-root UserStatus-success"
              >
                <div
                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
                >
                  <div>
                    Active
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr
            className="TableRow-root TableRow-body"
          >
            <td
              className="TableCell-root UserRow-usernameColumn TableCell-body"
            >
              <button
                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserRow-usernameButton"
                data-color="mono"
                data-variant="text"
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onMouseOut={[Function]}
                onMouseOver={[Function]}
                onTouchEnd={[Function]}
                type="button"
              >
                Lukas
              </button>
            </td>
            <td
              className="TableCell-root UserRow-emailColumn TableCell-body"
            >
              <a
                className="TextLink-root"
                href="mailto:lukas@test.com"
              >
                lukas@test.com
              </a>
            </td>
            <td
              className="TableCell-root UserRow-memberSinceColumn TableCell-body"
            >
              07/06/2018
            </td>
            <td
              className="TableCell-root UserRow-roleColumn TableCell-body"
            >
              <div
                className="Popover-root"
              >
                <button
                  aria-label="Change role"
                  className="BaseButton-root Button-root Button-sizeLarge Button-colorMono Button-variantText UserRoleChange-button"
                  data-color="mono"
                  data-variant="text"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span
                    className="UserRoleText-root"
                  >
                    Moderator
                  </span>
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-lg ButtonIcon-root"
                  >
                    arrow_drop_down
                  </i>
                </button>
                <div
                  aria-hidden={true}
                  aria-labelledby="community-roleChange-ariainfo"
                  id="community-roleChange"
                  role="dialog"
                >
                  <div
                    className="AriaInfo-root"
                    id="community-roleChange-ariainfo"
                  >
                    A dropdown to change the user role
                  </div>
                </div>
              </div>
            </td>
            <td
              className="TableCell-root UserRow-statusColumn TableCell-body"
            >
              <div
                className="UserStatus-root UserStatus-success"
              >
                <div
                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
                >
                  <div>
                    Active
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr
            className="TableRow-root TableRow-body"
          >
            <td
              className="TableCell-root UserRow-usernameColumn TableCell-body"
            >
              <button
                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserRow-usernameButton"
                data-color="mono"
                data-variant="text"
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onMouseOut={[Function]}
                onMouseOver={[Function]}
                onTouchEnd={[Function]}
                type="button"
              >
                Huy
              </button>
            </td>
            <td
              className="TableCell-root UserRow-emailColumn TableCell-body"
            >
              <a
                className="TextLink-root"
                href="mailto:huy@test.com"
              >
                huy@test.com
              </a>
            </td>
            <td
              className="TableCell-root UserRow-memberSinceColumn TableCell-body"
            >
              07/06/2018
            </td>
            <td
              className="TableCell-root UserRow-roleColumn TableCell-body"
            >
              <div
                className="Popover-root"
              >
                <button
                  aria-label="Change role"
                  className="BaseButton-root Button-root Button-sizeLarge Button-colorMono Button-variantText UserRoleChange-button"
                  data-color="mono"
                  data-variant="text"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span
                    className="UserRoleText-root"
                  >
                    Staff
                  </span>
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-lg ButtonIcon-root"
                  >
                    arrow_drop_down
                  </i>
                </button>
                <div
                  aria-hidden={true}
                  aria-labelledby="community-roleChange-ariainfo"
                  id="community-roleChange"
                  role="dialog"
                >
                  <div
                    className="AriaInfo-root"
                    id="community-roleChange-ariainfo"
                  >
                    A dropdown to change the user role
                  </div>
                </div>
              </div>
            </td>
            <td
              className="TableCell-root UserRow-statusColumn TableCell-body"
            >
              <div
                className="UserStatus-root UserStatus-success"
              >
                <div
                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
                >
                  <div>
                    Active
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr
            className="TableRow-root TableRow-body"
          >
            <td
              className="TableCell-root UserRow-usernameColumn TableCell-body"
            >
              <button
                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserRow-usernameButton"
                data-color="mono"
                data-variant="text"
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onMouseOut={[Function]}
                onMouseOver={[Function]}
                onTouchEnd={[Function]}
                type="button"
              >
                Isabelle
              </button>
            </td>
            <td
              className="TableCell-root UserRow-emailColumn TableCell-body"
            >
              <a
                className="TextLink-root"
                href="mailto:isabelle@test.com"
              >
                isabelle@test.com
              </a>
            </td>
            <td
              className="TableCell-root UserRow-memberSinceColumn TableCell-body"
            >
              07/06/2018
            </td>
            <td
              className="TableCell-root UserRow-roleColumn TableCell-body"
            >
              <div
                className="Popover-root"
              >
                <button
                  aria-label="Change role"
                  className="BaseButton-root Button-root Button-sizeLarge Button-colorMono Button-variantText UserRoleChange-button"
                  data-color="mono"
                  data-variant="text"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span
                    className="UserRoleText-root UserRoleText-commenter"
                  >
                    Commenter
                  </span>
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-lg ButtonIcon-root"
                  >
                    arrow_drop_down
                  </i>
                </button>
                <div
                  aria-hidden={true}
                  aria-labelledby="community-roleChange-ariainfo"
                  id="community-roleChange"
                  role="dialog"
                >
                  <div
                    className="AriaInfo-root"
                    id="community-roleChange-ariainfo"
                  >
                    A dropdown to change the user role
                  </div>
                </div>
              </div>
            </td>
            <td
              className="TableCell-root UserRow-statusColumn TableCell-body"
            >
              <div
                className="Popover-root"
              >
                <button
                  aria-label="Change user status"
                  className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserStatusChange-button UserStatusChange-fullWidth"
                  data-color="mono"
                  data-variant="text"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <div
                    className="UserStatus-root UserStatus-success"
                  >
                    <div
                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
                    >
                      <div>
                        Active
                      </div>
                    </div>
                  </div>
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-lg ButtonIcon-root"
                  >
                    arrow_drop_down
                  </i>
                </button>
                <div
                  aria-hidden={true}
                  aria-labelledby="community-statusChange-ariainfo"
                  id="community-statusChange"
                  role="dialog"
                >
                  <div
                    className="AriaInfo-root"
                    id="community-statusChange-ariainfo"
                  >
                    A dropdown to change the user status
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

exports[`renders empty community 1`] = `
<div
  className="MainLayout-root Community-root"
  data-testid="community-container"
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-double"
  >
    <div
      className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd"
    >
      <div
        className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
      >
        <fieldset
          className="FieldSet-root"
        >
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
          >
            <label
              className="Label-root"
            >
              Search
            </label>
            <form
              autoComplete="off"
              id="configure-form"
              onSubmit={[Function]}
            >
              <div
                className="TextField-root UserTableFilter-textField"
              >
                <input
                  aria-label="Search by username or email address"
                  className="TextField-input TextField-colorDark TextField-seamlessAdornment"
                  name="search"
                  onBlur={[Function]}
                  onChange={[Function]}
                  onFocus={[Function]}
                  placeholder="Search by username or email address..."
                  type="text"
                  value=""
                />
                <div
                  className="TextField-adornment"
                >
                  <button
                    aria-label="Search"
                    className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantRegular Button-uppercase Button-adornmentRight UserTableFilter-adornment"
                    data-color="dark"
                    data-variant="regular"
                    onBlur={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="submit"
                  >
                    <i
                      aria-hidden="true"
                      className="Icon-root Icon-md"
                    >
                      search
                    </i>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </fieldset>
        <fieldset
          className="FieldSet-root"
        >
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
          >
            <label
              className="Label-root"
            >
              Show Me
            </label>
            <div
              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
            >
              <span
                className="SelectField-root UserTableFilter-selectField"
              >
                <select
                  aria-label="Search by role"
                  className="SelectField-select"
                  onBlur={[Function]}
                  onChange={[Function]}
                  onFocus={[Function]}
                  value=""
                >
                  <option
                    value=""
                  >
                    All Roles
                  </option>
                  <optgroup
                    label="Audience"
                  >
                    <option
                      value="COMMENTER"
                    >
                      Commenters
                    </option>
                  </optgroup>
                  <optgroup
                    label="Organization"
                  >
                    <option
                      value="ADMIN"
                    >
                      Admins
                    </option>
                    <option
                      value="MODERATOR"
                    >
                      Moderators
                    </option>
                    <option
                      value="STAFF"
                    >
                      Staff
                    </option>
                  </optgroup>
                </select>
                <span
                  aria-hidden={true}
                  className="SelectField-afterWrapper"
                >
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-sm"
                  >
                    expand_more
                  </i>
                </span>
              </span>
              <span
                className="SelectField-root UserTableFilter-selectField"
              >
                <select
                  aria-label="Search by user status"
                  className="SelectField-select"
                  onBlur={[Function]}
                  onChange={[Function]}
                  onFocus={[Function]}
                  value=""
                >
                  <option
                    value=""
                  >
                    All Statuses
                  </option>
                  <option
                    value="ACTIVE"
                  >
                    Active
                  </option>
                  <option
                    value="SUSPENDED"
                  >
                    Suspended
                  </option>
                  <option
                    value="BANNED"
                  >
                    Banned
                  </option>
                  <option
                    value="PREMOD"
                  >
                    Always pre-moderate
                  </option>
                </select>
                <span
                  aria-hidden={true}
                  className="SelectField-afterWrapper"
                >
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-sm"
                  >
                    expand_more
                  </i>
                </span>
              </span>
            </div>
          </div>
        </fieldset>
      </div>
      <div
        data-testid="invite-users"
      >
        <button
          className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantFlat Button-uppercase InviteUsers-button"
          data-color="dark"
          data-testid="invite-users-button"
          data-variant="flat"
          onBlur={[Function]}
          onClick={[Function]}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          onTouchEnd={[Function]}
          type="button"
        >
          Invite
        </button>
      </div>
    </div>
    <div
      className="Box-root HorizontalGutter-root HorizontalGutter-double"
    >
      <table
        className="Table-root Table-fullWidth"
      >
        <thead
          className="TableHead-root"
        >
          <tr
            className="TableRow-root"
          >
            <th
              className="TableCell-root UserTable-usernameColumn TableCell-header"
            >
              Username
            </th>
            <th
              className="TableCell-root UserTable-emailColumn TableCell-header"
            >
              Email
            </th>
            <th
              className="TableCell-root UserTable-memberSinceColumn TableCell-header"
            >
              Member Since
            </th>
            <th
              className="TableCell-root UserTable-roleColumn TableCell-header"
            >
              Role
            </th>
            <th
              className="TableCell-root UserTable-statusColumn TableCell-header"
            >
              Status
            </th>
          </tr>
        </thead>
        <tbody
          className="TableBody-root"
        />
      </table>
      <div
        className="EmptyMessage-root"
      >
        We could not find anyone in your community matching your criteria.
      </div>
    </div>
  </div>
</div>
`;
