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

exports[`renders empty stories 1`] = `
<div
  className="MainLayout-root Stories-root"
  data-testid="stories-container"
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-double"
  >
    <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 StoryTableFilter-textField"
            >
              <input
                aria-label="Search by story title or author"
                className="TextField-input TextField-colorDark TextField-seamlessAdornment"
                name="search"
                onBlur={[Function]}
                onChange={[Function]}
                onFocus={[Function]}
                placeholder="Search by story title or author..."
                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 StoryTableFilter-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>
          <span
            className="SelectField-root"
          >
            <select
              aria-label="Search by status"
              className="SelectField-select"
              onBlur={[Function]}
              onChange={[Function]}
              onFocus={[Function]}
              value=""
            >
              <option
                value=""
              >
                All Stories
              </option>
              <option
                value="OPEN"
              >
                Open Stories
              </option>
              <option
                value="CLOSED"
              >
                Closed Stories
              </option>
            </select>
            <span
              aria-hidden={true}
              className="SelectField-afterWrapper"
            >
              <i
                aria-hidden="true"
                className="Icon-root Icon-sm"
              >
                expand_more
              </i>
            </span>
          </span>
        </div>
      </fieldset>
    </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 StoryTable-titleColumn TableCell-header"
            >
              <span>
                Title
              </span>
               
              <span
                className="StoryTable-clickToModerate"
              >
                (
                <span>
                  Click title to moderate story
                </span>
                )
              </span>
            </th>
            <th
              className="TableCell-root StoryTable-authorColumn TableCell-header"
            >
              Author
            </th>
            <th
              className="TableCell-root StoryTable-publishDateColumn TableCell-header"
            >
              Publish Date
            </th>
            <th
              className="TableCell-root StoryTable-statusColumn TableCell-header"
            >
              Status
            </th>
          </tr>
        </thead>
        <tbody
          className="TableBody-root"
        >
          <tr
            className="TableRow-root TableRow-body"
          >
            <td
              className="TableCell-root StoryRow-titleColumn TableCell-body"
            >
              <a
                className="TextLink-root"
                href="/admin/moderate/story-1"
                onClick={[Function]}
              >
                Finally a Cure for Cancer
              </a>
            </td>
            <td
              className="TableCell-root StoryRow-authorColumn TableCell-body"
            >
              Vin Hoa
            </td>
            <td
              className="TableCell-root StoryRow-publishDateColumn TableCell-body"
            >
              11/29/2018, 4:01 PM
            </td>
            <td
              className="TableCell-root StoryRow-statusColumn TableCell-body"
            >
              <div
                className="Popover-root"
              >
                <button
                  aria-label="Change status"
                  className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText StoryStatusChange-button"
                  data-color="mono"
                  data-variant="text"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span
                    className="StoryStatusText-root StoryStatusText-open"
                  >
                    Open
                  </span>
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-lg ButtonIcon-root"
                  >
                    arrow_drop_down
                  </i>
                </button>
                <div
                  aria-hidden={true}
                  aria-labelledby="stories-statusChange-ariainfo"
                  id="stories-statusChange"
                  role="dialog"
                >
                  <div
                    className="AriaInfo-root"
                    id="stories-statusChange-ariainfo"
                  >
                    A dropdown to change the story status
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr
            className="TableRow-root TableRow-body"
          >
            <td
              className="TableCell-root StoryRow-titleColumn TableCell-body"
            >
              <a
                className="TextLink-root"
                href="/admin/moderate/story-2"
                onClick={[Function]}
              >
                First Colony on Mars
              </a>
            </td>
            <td
              className="TableCell-root StoryRow-authorColumn TableCell-body"
            >
              Linh Nguyen
            </td>
            <td
              className="TableCell-root StoryRow-publishDateColumn TableCell-body"
            >
              11/29/2018, 4:01 PM
            </td>
            <td
              className="TableCell-root StoryRow-statusColumn TableCell-body"
            >
              <div
                className="Popover-root"
              >
                <button
                  aria-label="Change status"
                  className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText StoryStatusChange-button"
                  data-color="mono"
                  data-variant="text"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span
                    className="StoryStatusText-root StoryStatusText-open"
                  >
                    Open
                  </span>
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-lg ButtonIcon-root"
                  >
                    arrow_drop_down
                  </i>
                </button>
                <div
                  aria-hidden={true}
                  aria-labelledby="stories-statusChange-ariainfo"
                  id="stories-statusChange"
                  role="dialog"
                >
                  <div
                    className="AriaInfo-root"
                    id="stories-statusChange-ariainfo"
                  >
                    A dropdown to change the story status
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

exports[`renders stories 1`] = `
<div
  className="MainLayout-root Stories-root"
  data-testid="stories-container"
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-double"
  >
    <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 StoryTableFilter-textField"
            >
              <input
                aria-label="Search by story title or author"
                className="TextField-input TextField-colorDark TextField-seamlessAdornment"
                name="search"
                onBlur={[Function]}
                onChange={[Function]}
                onFocus={[Function]}
                placeholder="Search by story title or author..."
                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 StoryTableFilter-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>
          <span
            className="SelectField-root"
          >
            <select
              aria-label="Search by status"
              className="SelectField-select"
              onBlur={[Function]}
              onChange={[Function]}
              onFocus={[Function]}
              value=""
            >
              <option
                value=""
              >
                All Stories
              </option>
              <option
                value="OPEN"
              >
                Open Stories
              </option>
              <option
                value="CLOSED"
              >
                Closed Stories
              </option>
            </select>
            <span
              aria-hidden={true}
              className="SelectField-afterWrapper"
            >
              <i
                aria-hidden="true"
                className="Icon-root Icon-sm"
              >
                expand_more
              </i>
            </span>
          </span>
        </div>
      </fieldset>
    </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 StoryTable-titleColumn TableCell-header"
            >
              <span>
                Title
              </span>
               
              <span
                className="StoryTable-clickToModerate"
              >
                (
                <span>
                  Click title to moderate story
                </span>
                )
              </span>
            </th>
            <th
              className="TableCell-root StoryTable-authorColumn TableCell-header"
            >
              Author
            </th>
            <th
              className="TableCell-root StoryTable-publishDateColumn TableCell-header"
            >
              Publish Date
            </th>
            <th
              className="TableCell-root StoryTable-statusColumn TableCell-header"
            >
              Status
            </th>
          </tr>
        </thead>
        <tbody
          className="TableBody-root"
        >
          <tr
            className="TableRow-root TableRow-body"
          >
            <td
              className="TableCell-root StoryRow-titleColumn TableCell-body"
            >
              <a
                className="TextLink-root"
                href="/admin/moderate/story-1"
                onClick={[Function]}
              >
                Finally a Cure for Cancer
              </a>
            </td>
            <td
              className="TableCell-root StoryRow-authorColumn TableCell-body"
            >
              Vin Hoa
            </td>
            <td
              className="TableCell-root StoryRow-publishDateColumn TableCell-body"
            >
              11/29/2018, 4:01 PM
            </td>
            <td
              className="TableCell-root StoryRow-statusColumn TableCell-body"
            >
              <div
                className="Popover-root"
              >
                <button
                  aria-label="Change status"
                  className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText StoryStatusChange-button"
                  data-color="mono"
                  data-variant="text"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span
                    className="StoryStatusText-root StoryStatusText-open"
                  >
                    Open
                  </span>
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-lg ButtonIcon-root"
                  >
                    arrow_drop_down
                  </i>
                </button>
                <div
                  aria-hidden={true}
                  aria-labelledby="stories-statusChange-ariainfo"
                  id="stories-statusChange"
                  role="dialog"
                >
                  <div
                    className="AriaInfo-root"
                    id="stories-statusChange-ariainfo"
                  >
                    A dropdown to change the story status
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr
            className="TableRow-root TableRow-body"
          >
            <td
              className="TableCell-root StoryRow-titleColumn TableCell-body"
            >
              <a
                className="TextLink-root"
                href="/admin/moderate/story-2"
                onClick={[Function]}
              >
                First Colony on Mars
              </a>
            </td>
            <td
              className="TableCell-root StoryRow-authorColumn TableCell-body"
            >
              Linh Nguyen
            </td>
            <td
              className="TableCell-root StoryRow-publishDateColumn TableCell-body"
            >
              11/29/2018, 4:01 PM
            </td>
            <td
              className="TableCell-root StoryRow-statusColumn TableCell-body"
            >
              <div
                className="Popover-root"
              >
                <button
                  aria-label="Change status"
                  className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText StoryStatusChange-button"
                  data-color="mono"
                  data-variant="text"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span
                    className="StoryStatusText-root StoryStatusText-open"
                  >
                    Open
                  </span>
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-lg ButtonIcon-root"
                  >
                    arrow_drop_down
                  </i>
                </button>
                <div
                  aria-hidden={true}
                  aria-labelledby="stories-statusChange-ariainfo"
                  id="stories-statusChange"
                  role="dialog"
                >
                  <div
                    className="AriaInfo-root"
                    id="stories-statusChange-ariainfo"
                  >
                    A dropdown to change the story status
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;
