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

exports[`OuiSideNav is rendered 1`] = `
<nav
  aria-label="aria-label"
  class="ouiSideNav testClass1 testClass2"
  data-test-subj="test subject string"
>
  <div
    class="ouiSideNav__content ouiSideNav__contentMobile-xs ouiSideNav__contentMobile-s"
    id="ouiSideNavContent_generated-id"
  />
</nav>
`;

exports[`OuiSideNav props heading accepts more headingProps 1`] = `
<nav
  aria-labelledby="testID"
  class="ouiSideNav"
>
  <h3
    aria-label="aria-label"
    class="ouiTitle ouiTitle--xsmall ouiSideNav__heading testClass1 testClass2 testClass1 testClass2"
    data-test-subj="test subject string"
    id="testID"
  >
    Side Nav Heading
  </h3>
  <div
    class="ouiSideNav__content ouiSideNav__contentMobile-xs ouiSideNav__contentMobile-s"
    id="ouiSideNavContent_generated-id"
  />
</nav>
`;

exports[`OuiSideNav props heading is hidden with screenReaderOnly 1`] = `
<nav
  aria-labelledby="ouiSideNavHeading_generated-id"
  class="ouiSideNav"
>
  <h2
    class="ouiScreenReaderOnly"
    id="ouiSideNavHeading_generated-id"
  >
    Side Nav Heading
  </h2>
  <div
    class="ouiSideNav__content ouiSideNav__contentMobile-xs ouiSideNav__contentMobile-s"
    id="ouiSideNavContent_generated-id"
  />
</nav>
`;

exports[`OuiSideNav props heading is rendered 1`] = `
<nav
  aria-labelledby="ouiSideNavHeading_generated-id"
  class="ouiSideNav"
>
  <h2
    class="ouiTitle ouiTitle--xsmall ouiSideNav__heading"
    id="ouiSideNavHeading_generated-id"
  >
    Side Nav Heading
  </h2>
  <div
    class="ouiSideNav__content ouiSideNav__contentMobile-xs ouiSideNav__contentMobile-s"
    id="ouiSideNavContent_generated-id"
  />
</nav>
`;

exports[`OuiSideNav props isOpenOnMobile defaults to false 1`] = `
<nav
  class="ouiSideNav"
>
  <div
    class="ouiSideNav__content ouiSideNav__contentMobile-xs ouiSideNav__contentMobile-s"
    id="ouiSideNavContent_generated-id"
  />
</nav>
`;

exports[`OuiSideNav props isOpenOnMobile is rendered when specified as true 1`] = `
<nav
  class="ouiSideNav ouiSideNav-isOpenMobile"
>
  <div
    class="ouiSideNav__content ouiSideNav__contentMobile-xs ouiSideNav__contentMobile-s"
    id="ouiSideNavContent_generated-id"
  />
</nav>
`;

exports[`OuiSideNav props items is rendered 1`] = `
<nav
  class="ouiSideNav"
>
  <div
    class="ouiSideNav__content ouiSideNav__contentMobile-xs ouiSideNav__contentMobile-s"
    id="ouiSideNavContent_generated-id"
  >
    <div
      class="ouiSideNavItem ouiSideNavItem--root ouiSideNavItem--hasChildItems"
    >
      <div
        class="ouiSideNavItemButton"
      >
        <span
          class="ouiSideNavItemButton__content"
        >
          <span
            class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
          >
            A
          </span>
        </span>
      </div>
      <div
        class="ouiSideNavItem__items"
      >
        <div
          class="ouiSideNavItem ouiSideNavItem--trunk class"
        >
          <div
            aria-label="aria"
            class="ouiSideNavItemButton"
            data-test-sub="dts"
          >
            <span
              class="ouiSideNavItemButton__content"
            >
              <span
                class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
              >
                B
              </span>
            </span>
          </div>
        </div>
        <div
          class="ouiSideNavItem ouiSideNavItem--trunk ouiSideNavItem--emphasized"
        >
          <button
            class="ouiSideNavItemButton"
            type="button"
          >
            <span
              class="ouiSideNavItemButton__content"
            >
              <span
                class="ouiSideNavItemButton__label"
              >
                C
              </span>
              <span
                data-ouiicon-type="arrowRight"
              />
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</nav>
`;

exports[`OuiSideNav props items renders items having { forceOpen: true } in open state, and automatically opens parent items 1`] = `
<nav
  class="ouiSideNav"
>
  <div
    class="ouiSideNav__content ouiSideNav__contentMobile-xs ouiSideNav__contentMobile-s"
    id="ouiSideNavContent_generated-id"
  >
    <div
      class="ouiSideNavItem ouiSideNavItem--root ouiSideNavItem--hasChildItems"
    >
      <div
        class="ouiSideNavItemButton"
      >
        <span
          class="ouiSideNavItemButton__content"
        >
          <span
            class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
          >
            A
          </span>
        </span>
      </div>
      <div
        class="ouiSideNavItem__items"
      >
        <div
          class="ouiSideNavItem ouiSideNavItem--trunk"
        >
          <div
            class="ouiSideNavItemButton"
          >
            <span
              class="ouiSideNavItemButton__content"
            >
              <span
                class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
              >
                B
              </span>
            </span>
          </div>
        </div>
        <div
          class="ouiSideNavItem ouiSideNavItem--trunk ouiSideNavItem--hasChildItems"
        >
          <button
            class="ouiSideNavItemButton ouiSideNavItemButton-isOpen"
            type="button"
          >
            <span
              class="ouiSideNavItemButton__content"
            >
              <span
                class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
              >
                C
              </span>
              <span
                data-ouiicon-type="arrowDown"
              />
            </span>
          </button>
          <div
            class="ouiSideNavItem__items"
          >
            <div
              class="ouiSideNavItem ouiSideNavItem--branch ouiSideNavItem--hasChildItems"
            >
              <button
                class="ouiSideNavItemButton ouiSideNavItemButton-isOpen"
                type="button"
              >
                <span
                  class="ouiSideNavItemButton__content"
                >
                  <span
                    class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
                  >
                    D
                  </span>
                  <span
                    data-ouiicon-type="arrowDown"
                  />
                </span>
              </button>
              <div
                class="ouiSideNavItem__items"
              >
                <div
                  class="ouiSideNavItem ouiSideNavItem--branch"
                >
                  <div
                    class="ouiSideNavItemButton"
                  >
                    <span
                      class="ouiSideNavItemButton__content"
                    >
                      <span
                        class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
                      >
                        E
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>
`;

exports[`OuiSideNav props items renders items using a specified callback 1`] = `
<nav
  class="ouiSideNav"
>
  <div
    class="ouiSideNav__content ouiSideNav__contentMobile-xs ouiSideNav__contentMobile-s"
    id="ouiSideNavContent_generated-id"
  >
    <div
      class="ouiSideNavItem ouiSideNavItem--root ouiSideNavItem--hasChildItems"
    >
      <a
        class="ouiSideNavItemButton ouiSideNavItemButton--isClickable"
        data-test-id="my-custom-element"
        href="http://www.elastic.co"
      >
        <span
          class="ouiSideNavItemButton__content"
        >
          <span
            class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
          >
            A
          </span>
        </span>
      </a>
      <div
        class="ouiSideNavItem__items"
      >
        <div
          class="ouiSideNavItem ouiSideNavItem--trunk"
        >
          <a
            class="ouiSideNavItemButton"
            data-test-id="my-custom-element"
          >
            <span
              class="ouiSideNavItemButton__content"
            >
              <span
                class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
              >
                B
              </span>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>
`;

exports[`OuiSideNav props items renders items which are links 1`] = `
<nav
  class="ouiSideNav"
>
  <div
    class="ouiSideNav__content ouiSideNav__contentMobile-xs ouiSideNav__contentMobile-s"
    id="ouiSideNavContent_generated-id"
  >
    <div
      class="ouiSideNavItem ouiSideNavItem--root ouiSideNavItem--hasChildItems"
    >
      <a
        class="ouiSideNavItemButton ouiSideNavItemButton--isClickable"
        href="http://www.elastic.co"
        rel=""
      >
        <span
          class="ouiSideNavItemButton__content"
        >
          <span
            class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
          >
            A
          </span>
        </span>
      </a>
      <div
        class="ouiSideNavItem__items"
      >
        <div
          class="ouiSideNavItem ouiSideNavItem--trunk"
        >
          <div
            class="ouiSideNavItemButton"
          >
            <span
              class="ouiSideNavItemButton__content"
            >
              <span
                class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
              >
                B
              </span>
            </span>
          </div>
        </div>
        <div
          class="ouiSideNavItem ouiSideNavItem--trunk"
        >
          <button
            class="ouiSideNavItemButton"
            type="button"
          >
            <span
              class="ouiSideNavItemButton__content"
            >
              <span
                class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
              >
                C
              </span>
              <span
                data-ouiicon-type="arrowRight"
              />
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</nav>
`;

exports[`OuiSideNav props items renders selected item and automatically opens parent items 1`] = `
<nav
  class="ouiSideNav"
>
  <div
    class="ouiSideNav__content ouiSideNav__contentMobile-xs ouiSideNav__contentMobile-s"
    id="ouiSideNavContent_generated-id"
  >
    <div
      class="ouiSideNavItem ouiSideNavItem--root ouiSideNavItem--hasChildItems"
    >
      <div
        class="ouiSideNavItemButton"
      >
        <span
          class="ouiSideNavItemButton__content"
        >
          <span
            class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
          >
            A
          </span>
        </span>
      </div>
      <div
        class="ouiSideNavItem__items"
      >
        <div
          class="ouiSideNavItem ouiSideNavItem--trunk"
        >
          <div
            class="ouiSideNavItemButton"
          >
            <span
              class="ouiSideNavItemButton__content"
            >
              <span
                class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
              >
                B
              </span>
            </span>
          </div>
        </div>
        <div
          class="ouiSideNavItem ouiSideNavItem--trunk ouiSideNavItem--hasChildItems"
        >
          <button
            class="ouiSideNavItemButton ouiSideNavItemButton-isOpen"
            type="button"
          >
            <span
              class="ouiSideNavItemButton__content"
            >
              <span
                class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
              >
                C
              </span>
              <span
                data-ouiicon-type="arrowDown"
              />
            </span>
          </button>
          <div
            class="ouiSideNavItem__items"
          >
            <div
              class="ouiSideNavItem ouiSideNavItem--branch"
            >
              <div
                class="ouiSideNavItemButton ouiSideNavItemButton-isSelected"
              >
                <span
                  class="ouiSideNavItemButton__content"
                >
                  <span
                    class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
                  >
                    D
                  </span>
                </span>
              </div>
            </div>
            <div
              class="ouiSideNavItem ouiSideNavItem--branch"
            >
              <div
                class="ouiSideNavItemButton"
              >
                <span
                  class="ouiSideNavItemButton__content"
                >
                  <span
                    class="ouiSideNavItemButton__label ouiSideNavItemButton__label--truncated"
                  >
                    E
                  </span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>
`;

exports[`OuiSideNav props mobileBreakpoints can be adjusted is rendered 1`] = `
<nav
  aria-labelledby="ouiSideNavHeading_generated-id"
  class="ouiSideNav"
>
  <h2
    id="ouiSideNavHeading_generated-id"
  >
    <button
      aria-controls="ouiSideNavContent_generated-id"
      class="ouiButtonEmpty ouiButtonEmpty--primary ouiSideNav__mobileToggle"
      type="button"
    >
      <span
        class="ouiButtonContent ouiButtonContent--iconRight ouiButtonEmpty__content ouiSideNav__mobileToggleContent"
      >
        <span
          class="ouiButtonContent__icon"
          color="inherit"
          data-ouiicon-type="apps"
        />
        <span
          class="ouiButtonEmpty__text ouiSideNav__mobileToggleText"
        />
      </span>
    </button>
  </h2>
  <div
    class="ouiSideNav__content ouiSideNav__contentMobile-xs ouiSideNav__contentMobile-s ouiSideNav__contentMobile-m ouiSideNav__contentMobile-l ouiSideNav__contentMobile-xl"
    id="ouiSideNavContent_generated-id"
  />
</nav>
`;

exports[`OuiSideNav props mobileBreakpoints can be adjusted null is rendered 1`] = `
<nav
  class="ouiSideNav"
>
  <div
    class="ouiSideNav__content ouiSideNav__contentMobile-xs ouiSideNav__contentMobile-s"
    id="ouiSideNavContent_generated-id"
  />
</nav>
`;