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

exports[`renders the VisualizeTable component 1`] = `
<div>
  <div
    class="grid-row"
  >
    <div
      class="tablet:grid-col-6"
    >
      <div
        class="border-base-lighter border-1px shadow-3 z-500 radius-md padding-2 bg-white position-sticky "
      >
        <fieldset
          class="usa-fieldset"
        >
          <legend
            class="usa-hint grid-col-6"
          >
            Configure table content.
          </legend>
          <div
            class="usa-form-group"
            role="contentinfo"
          >
            <label
              class="usa-label text-bold"
              for="title"
            >
              Table title
            </label>
            <div
              class="usa-hint"
              id="title-description"
            >
              Give your table a descriptive title.
            </div>
            <input
              aria-describedby="title-description"
              class="usa-input"
              id="title"
              name="title"
              type="text"
              value=""
            />
          </div>
          <div
            class="usa-checkbox"
          >
            <input
              checked=""
              class="usa-checkbox__input"
              id="display-title"
              name="showTitle"
              type="checkbox"
            />
            <label
              class="usa-checkbox__label"
              for="display-title"
            >
              Show title on dashboard
            </label>
          </div>
          <div
            class="margin-top-3 grid-col-6"
          >
            <div
              class="usa-form-group"
              role="contentinfo"
            >
              <label
                class="usa-label text-bold"
                for="sortData"
              >
                Sort data (optional)
              </label>
              <div
                class="usa-hint"
                id="sortData-description"
              />
              <select
                aria-describedby="sortData-description"
                class="usa-select"
                id="sortData"
                name="sortData"
              >
                <option
                  selected=""
                  value=""
                >
                  Select an option
                </option>
                <option
                  value="1###asc"
                >
                  "1" A-Z
                </option>
                <option
                  value="1###desc"
                >
                  "1" Z-A
                </option>
                <option
                  value="2###asc"
                >
                  "2" A-Z
                </option>
                <option
                  value="2###desc"
                >
                  "2" Z-A
                </option>
                <option
                  value="3###asc"
                >
                  "3" A-Z
                </option>
                <option
                  value="3###desc"
                >
                  "3" Z-A
                </option>
              </select>
            </div>
          </div>
          <div>
            <label
              class="usa-label text-bold"
            >
              Table Options (optional)
            </label>
            <fieldset
              class="usa-fieldset"
            >
              <legend
                class="usa-hint"
              >
                Format your table
              </legend>
              <div
                class="usa-checkbox"
              >
                <input
                  class="usa-checkbox__input"
                  id="significantDigitLabels"
                  name="significantDigitLabels"
                  type="checkbox"
                />
                <label
                  class="usa-checkbox__label"
                  for="significantDigitLabels"
                >
                  Significant digit labels (123K, 1.2M)
                </label>
              </div>
              <div
                class="usa-checkbox"
              >
                <input
                  class="usa-checkbox__input"
                  id="displayWithPages"
                  name="displayWithPages"
                  type="checkbox"
                />
                <label
                  class="usa-checkbox__label"
                  for="displayWithPages"
                >
                  Display with pages
                </label>
              </div>
            </fieldset>
          </div>
          <div
            class="usa-form-group"
            role="contentinfo"
          >
            <label
              class="usa-label text-bold"
              for="summary"
            >
              Table summary (optional)
            </label>
            <div
              class="usa-hint"
              id="summary-description"
            >
              Give your table a summary to explain it in more depth. It can also be read by screen readers to describe the table for those with visual impairments. This field supports markdown.
               
              <a
                class="usa-link action-link"
                href="/admin/markdown"
                target="_blank"
              >
                <span>
                  View Markdown Syntax
                </span>
                <svg
                  aria-hidden="false"
                  aria-label="(opens in a new tab)"
                  class="svg-inline--fa fa-external-link-alt fa-w-16 fa-xs margin-left-05"
                  data-icon="external-link-alt"
                  data-prefix="fas"
                  focusable="false"
                  role="img"
                  viewBox="0 0 512 512"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
                    fill="currentColor"
                  />
                </svg>
              </a>
            </div>
            <textarea
              aria-describedby="summary-description"
              class="usa-textarea"
              id="summary"
              name="summary"
              rows="5"
              style="height: auto;"
            />
          </div>
          <div
            class="usa-checkbox"
          >
            <input
              class="usa-checkbox__input"
              id="summary-below"
              name="summaryBelow"
              type="checkbox"
            />
            <label
              class="usa-checkbox__label"
              for="summary-below"
            >
              Show summary below table
            </label>
          </div>
          <br />
          <br />
          <hr />
          <button
            class="usa-button usa-button--outline margin-top-1"
            type="button"
          >
            Back
          </button>
          <button
            class="usa-button usa-button--base margin-top-1"
            type="submit"
          >
            Add Table
          </button>
          <button
            class="usa-button usa-button--unstyled text-base-dark hover:text-base-darker active:text-base-darkest margin-top-1"
            type="button"
          >
            Cancel
          </button>
        </fieldset>
      </div>
    </div>
    <section
      aria-label="Content preview"
      class="tablet:grid-col-6"
    >
      <div
        class="margin-left-4 sticky-preview"
      >
        <button
          class="usa-button usa-button--base"
        >
          Full preview
        </button>
        <div>
          
          <div
            aria-label="Test"
            class="overflow-x-hidden overflow-y-hidden "
            tabindex="-1"
          >
            <h2
              class="margin-bottom-1"
            >
              Test
              <a
                aria-label="Copy link: Test"
                class="shareButton margin-left-1"
                href="http://localhost/#undefineda"
              >
                <svg
                  aria-hidden="true"
                  class="svg-inline--fa fa-link fa-w-16 fa-xs "
                  data-icon="link"
                  data-prefix="fas"
                  focusable="false"
                  role="img"
                  viewBox="0 0 512 512"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"
                    fill="currentColor"
                  />
                </svg>
              </a>
              <span
                class="anchor"
                id="undefineda"
              />
            </h2>
            <div
              class="Markdown usa-prose margin-top-0 margin-bottom-3 tableSummaryAbove textOrSummary"
            />
            <div
              class="overflow-x-hidden overflow-y-hidden"
            >
              <table
                class="usa-table usa-table--borderless"
                role="table"
              >
                <thead>
                  <tr
                    role="row"
                  >
                    <th
                      aria-sort="none"
                      colspan="1"
                      role="columnheader"
                      scope="col"
                      style="min-width: 150px;"
                    >
                      <button
                        aria-label="Toggle SortBy: id"
                        class="usa-button usa-button--unstyled text-no-underline"
                        style="cursor: pointer;"
                        title="Toggle SortBy: id"
                        type="button"
                      >
                        <span>
                          id
                        </span>
                        <svg
                          aria-hidden="true"
                          class="svg-inline--fa fa-chevron-down fa-w-14 margin-left-1"
                          data-icon="chevron-down"
                          data-prefix="fas"
                          focusable="false"
                          role="img"
                          viewBox="0 0 448 512"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"
                            fill="currentColor"
                          />
                        </svg>
                      </button>
                    </th>
                    <th
                      aria-sort="none"
                      colspan="1"
                      role="columnheader"
                      scope="col"
                      style="min-width: 150px;"
                    >
                      <button
                        aria-label="Toggle SortBy: name"
                        class="usa-button usa-button--unstyled text-no-underline"
                        style="cursor: pointer;"
                        title="Toggle SortBy: name"
                        type="button"
                      >
                        <span>
                          name
                        </span>
                        <svg
                          aria-hidden="true"
                          class="svg-inline--fa fa-chevron-down fa-w-14 margin-left-1"
                          data-icon="chevron-down"
                          data-prefix="fas"
                          focusable="false"
                          role="img"
                          viewBox="0 0 448 512"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"
                            fill="currentColor"
                          />
                        </svg>
                      </button>
                    </th>
                    <th
                      aria-sort="none"
                      colspan="1"
                      role="columnheader"
                      scope="col"
                      style="min-width: 150px;"
                    >
                      <button
                        aria-label="Toggle SortBy: updatedAt"
                        class="usa-button usa-button--unstyled text-no-underline"
                        style="cursor: pointer;"
                        title="Toggle SortBy: updatedAt"
                        type="button"
                      >
                        <span>
                          updatedAt
                        </span>
                        <svg
                          aria-hidden="true"
                          class="svg-inline--fa fa-chevron-down fa-w-14 margin-left-1"
                          data-icon="chevron-down"
                          data-prefix="fas"
                          focusable="false"
                          role="img"
                          viewBox="0 0 448 512"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"
                            fill="currentColor"
                          />
                        </svg>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  role="rowgroup"
                >
                  <tr
                    role="row"
                  >
                    <th
                      role="cell"
                      scope="row"
                    >
                      1
                    </th>
                    <td
                      role="cell"
                    >
                      Banana
                    </td>
                    <td
                      role="cell"
                    >
                      2021-11-11
                    </td>
                  </tr>
                  <tr
                    role="row"
                  >
                    <th
                      role="cell"
                      scope="row"
                    >
                      2
                    </th>
                    <td
                      role="cell"
                    >
                      Chocolate
                    </td>
                    <td
                      role="cell"
                    >
                      2020-11-11
                    </td>
                  </tr>
                  <tr
                    role="row"
                  >
                    <th
                      role="cell"
                      scope="row"
                    >
                      3
                    </th>
                    <td
                      role="cell"
                    >
                      Vanilla
                    </td>
                    <td
                      role="cell"
                    >
                      2019-11-11
                    </td>
                  </tr>
                </tbody>
              </table>
              <div
                class="grid-row text-base-darker text-italic padding-y-05 padding-right-1"
              >
                <div
                  class="grid-col-6 text-left"
                >
                  <div
                    style="display: inline-flex;"
                  >
                    <svg
                      aria-hidden="true"
                      class="svg-inline--fa fa-download fa-w-16 fa-xs margin-right-1"
                      data-icon="download"
                      data-prefix="fas"
                      focusable="false"
                      role="img"
                      viewBox="0 0 512 512"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
                        fill="currentColor"
                      />
                    </svg>
                  </div>
                  <div
                    style="display: inline-flex;"
                  >
                    <div
                      class="margin-right-05"
                    >
                      <a
                        class="text-base-darker"
                        download="Test"
                        href="data:text/csv;charset=utf-8,\\"id\\",\\"name\\",\\"updatedAt\\"
\\"1\\",\\"Banana\\",\\"2021-11-11\\"
\\"2\\",\\"Chocolate\\",\\"2020-11-11\\"
\\"3\\",\\"Vanilla\\",\\"2019-11-11\\""
                        target="_self"
                      >
                        Download table
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
`;