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

exports[`topic area settings should match snapshot 1`] = `
<div>
  <div
    class="usa-section padding-top-3"
  >
    <div
      class="grid-container padding-x-0"
    >
      <div
        class="grid-row grid-gap"
      >
        <div
          class="desktop:grid-col-3"
        >
          <nav
            aria-label="Left navigation"
          >
            <ul
              class="usa-sidenav"
            >
              <li
                class="usa-sidenav__item"
              >
                <a
                  class="usa-current"
                  href="/admin/settings"
                >
                  Settings
                </a>
                <ul
                  class="usa-sidenav__sublist"
                >
                  <li
                    class="usa-sidenav__item"
                  >
                    <a
                      aria-current="page"
                      class="usa-current"
                      href="/admin/settings/topicarea"
                    >
                      Topic areas
                    </a>
                  </li>
                </ul>
                <ul
                  class="usa-sidenav__sublist"
                >
                  <li
                    class="usa-sidenav__item"
                  >
                    <a
                      class=""
                      href="/admin/settings/publishingguidance"
                    >
                      Publishing guidance
                    </a>
                  </li>
                </ul>
                <ul
                  class="usa-sidenav__sublist"
                >
                  <li
                    class="usa-sidenav__item"
                  >
                    <a
                      class=""
                      href="/admin/settings/brandingandstyling"
                    >
                      Branding and styling
                    </a>
                  </li>
                </ul>
                <ul
                  class="usa-sidenav__sublist"
                >
                  <li
                    class="usa-sidenav__item"
                  >
                    <a
                      class=""
                      href="/admin/settings/publishedsite"
                    >
                      Published site
                    </a>
                  </li>
                </ul>
                <ul
                  class="usa-sidenav__sublist"
                >
                  <li
                    class="usa-sidenav__item"
                  >
                    <a
                      class=""
                      href="/admin/settings/dateformat"
                    >
                      Date and time format
                    </a>
                  </li>
                </ul>
                <ul
                  class="usa-sidenav__sublist"
                >
                  <li
                    class="usa-sidenav__item"
                  >
                    <a
                      class=""
                      href="/admin/settings/adminsite"
                    >
                      Admin site
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
        </div>
        <div
          class="desktop:grid-col-9 usa-prose mobile-margin-top-2"
          id="main-content"
        >
          <h1>
            Topic areas
          </h1>
          <p>
            Dashboards are organized by topic areas. A dashboard must have a topic area and can have only one topic area.
          </p>
          <h2
            class="margin-top-2-important"
          >
            Topic area name
          </h2>
          <p>
            You can customize the name 'topic area' and it will be replaced throughout the interface. For example, 'topic area' can be renamed to 'department', 'ministry', 'program', 'agency', etc.
          </p>
          <div
            class="grid-row margin-top-0-important"
          >
            <div
              class="grid-col flex-9"
            >
              <h3>
                Single topic area name
              </h3>
            </div>
            <div
              class="grid-col flex-3 text-right"
            >
              <button
                aria-label="Edit topic area name"
                class="usa-button usa-button--outline margin-top-2"
                data-testid="edittopicarealabel"
              >
                Edit
              </button>
            </div>
          </div>
          <div
            class="grid-row margin-top-0-important margin-bottom-4"
          >
            <div
              class="grid-col flex-9"
            >
              <div
                class="published-site font-sans-lg"
              >
                <div
                  class="Markdown undefined"
                >
                  <p>
                    Ministry
                  </p>
                </div>
              </div>
            </div>
            <div
              class="grid-col flex-3 text-right"
            />
          </div>
          <div
            class="grid-col flex-9"
          >
            <h3>
              Multiple topic areas name
            </h3>
          </div>
          <div
            class="grid-row margin-top-0-important margin-bottom-4"
          >
            <div
              class="grid-col flex-9"
            >
              <div
                class="published-site font-sans-lg"
              >
                <div
                  class="Markdown undefined"
                >
                  <p>
                    Ministries
                  </p>
                </div>
              </div>
            </div>
            <div
              class="grid-col flex-3 text-right"
            />
          </div>
          <hr
            style="height: 1px; background-color: rgb(223, 225, 226); margin: 2rem 0px;"
          />
          <h2
            id="section-heading-h3"
          >
            Topic areas (2)
          </h2>
          <div
            class="font-sans-sm"
          >
            <p
              class="margin-y-0"
            >
              These are all of the topic areas. You can add, edit and delete it, but you can only delete topic areas without dashboards.
            </p>
          </div>
          <div
            class="grid-row margin-y-3"
          >
            <div
              class="tablet:grid-col-12 text-right"
            >
              <span>
                <button
                  aria-controls="menu--57"
                  aria-haspopup="true"
                  aria-label="Topic area listing actions"
                  class="usa-button usa-button--outline"
                  data-reach-menu-button=""
                  id="menu-button--menu--57"
                  type="button"
                >
                  Actions
                  <svg
                    aria-hidden="true"
                    class="svg-inline--fa fa-caret-down fa-w-10 margin-left-1"
                    data-icon="caret-down"
                    data-prefix="fas"
                    focusable="false"
                    role="img"
                    viewBox="0 0 320 512"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
                      fill="currentColor"
                    />
                  </svg>
                </button>
              </span>
              <span>
                <button
                  class="usa-button usa-button--base"
                  data-testid="createtopicarea"
                >
                  Create new topic area
                </button>
              </span>
            </div>
          </div>
          <div
            class="overflow-x-hidden overflow-y-hidden"
          >
            <table
              class="usa-table usa-table--borderless"
              id="topicAreas"
              role="table"
              width="100%"
            >
              <thead>
                <tr
                  role="row"
                >
                  <th
                    aria-sort="none"
                    colspan="1"
                    role="columnheader"
                    scope="col"
                    style="padding: 0.5rem 1rem;"
                  >
                    <span />
                  </th>
                  <th
                    aria-sort="none"
                    colspan="1"
                    role="columnheader"
                    scope="col"
                    style="padding: 0.5rem 1rem;"
                  >
                    <button
                      aria-label="Toggle SortBy: Topic area"
                      class="usa-button usa-button--unstyled text-no-underline"
                      style="cursor: pointer;"
                      title="Toggle SortBy: Topic area"
                      type="button"
                    >
                      <span>
                        Topic area
                      </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="descending"
                    colspan="1"
                    role="columnheader"
                    scope="col"
                    style="padding: 0.5rem 1rem;"
                  >
                    <button
                      aria-label="Toggle SortBy: Dashboards"
                      class="usa-button usa-button--unstyled text-no-underline"
                      style="cursor: pointer;"
                      title="Toggle SortBy: Dashboards"
                      type="button"
                    >
                      <span>
                        Dashboards
                      </span>
                      <svg
                        aria-hidden="true"
                        class="svg-inline--fa fa-chevron-circle-down fa-w-16 margin-left-1"
                        data-icon="chevron-circle-down"
                        data-prefix="fas"
                        focusable="false"
                        role="img"
                        viewBox="0 0 512 512"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z"
                          fill="currentColor"
                        />
                      </svg>
                    </button>
                  </th>
                  <th
                    aria-sort="none"
                    colspan="1"
                    role="columnheader"
                    scope="col"
                    style="padding: 0.5rem 1rem;"
                  >
                    <button
                      aria-label="Toggle SortBy: Created by"
                      class="usa-button usa-button--unstyled text-no-underline"
                      style="cursor: pointer;"
                      title="Toggle SortBy: Created by"
                      type="button"
                    >
                      <span>
                        Created by
                      </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"
                >
                  <td
                    role="cell"
                  >
                    <div>
                      <input
                        aria-labelledby="Topic Area Grapes"
                        style="cursor: pointer;"
                        title="Topic Area Grapes"
                        type="radio"
                      />
                    </div>
                  </td>
                  <td
                    role="cell"
                  >
                    <span
                      class="text-bold text-base-darker"
                    >
                      Topic Area Grapes
                    </span>
                  </td>
                  <td
                    role="cell"
                  >
                    10
                  </td>
                  <td
                    role="cell"
                  >
                    test user 2
                  </td>
                </tr>
                <tr
                  role="row"
                >
                  <td
                    role="cell"
                  >
                    <div>
                      <input
                        aria-labelledby="Topic Area Bananas"
                        style="cursor: pointer;"
                        title="Topic Area Bananas"
                        type="radio"
                      />
                    </div>
                  </td>
                  <td
                    role="cell"
                  >
                    <span
                      class="text-bold text-base-darker"
                    >
                      Topic Area Bananas
                    </span>
                  </td>
                  <td
                    role="cell"
                  >
                    4
                  </td>
                  <td
                    role="cell"
                  >
                    test user 1
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;