bbc/simorgh

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

exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
.emotion-0 {
  position: relative;
  background-color: #FFFFFF;
}

@media (max-width: 37.4375rem) {
  .emotion-0.si-nav-open {
    background-color: #222222;
  }
}

.emotion-0::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  border-bottom: 0.0625rem solid #E6E8EA;
}

.emotion-0 .e11sm0on2::after {
  left: 0;
}

.emotion-2 {
  position: relative;
  max-width: 63.4rem;
  margin: 0;
  background-color: #FFFFFF;
}

@media (min-width: 37.5rem) {
  .emotion-2 {
    margin: 0 0.8rem;
  }
}

@media (min-width: 66rem) {
  .emotion-2 {
    margin: 0 auto;
  }
}

.emotion-4 {
  position: relative;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: 0;
  float: left;
  height: 2.75rem;
  width: 2.75rem;
}

.emotion-4:hover,
.emotion-4:focus {
  cursor: pointer;
  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
}

.emotion-4:hover::after,
.emotion-4:focus::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 0.25rem solid #000000;
}

@media (min-width: 37.5rem) {
  .emotion-4 {
    display: none;
    visibility: hidden;
  }
}

@media (min-width: 20rem) {
  .emotion-4 {
    height: 2.75rem;
    width: 2.75rem;
  }
}

.emotion-4 svg {
  vertical-align: middle;
}

.emotion-6 {
  color: #000000;
  fill: currentColor;
}

@media screen and (forced-colors: active) {
  .emotion-6 {
    fill: linkText;
  }
}

.emotion-10 {
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  margin: 0;
}

.emotion-11 {
  background-color: #FFFFFF;
  clear: both;
}

@media (min-width: 37.5rem) {
  .emotion-11 {
    display: none;
    visibility: hidden;
  }
}

@media (max-width: 37.4375rem) {
  .emotion-14 {
    white-space: nowrap;
    overflow-x: scroll;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .emotion-14::-webkit-scrollbar {
    display: none;
  }

  .emotion-14:focus-visible {
    outline: none;
  }

  .emotion-14:focus-visible::after {
    outline: 0.1875rem solid #000000;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .emotion-14:after {
    content: ' ';
    height: 100%;
    width: 3rem;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 100%
          );
  }

  @media (min-width: 25rem) {
    .emotion-14:after {
      width: 6rem;
    }
  }
}

@media (max-width: 37.4375rem) {
  .emotion-14.si-nav-scrollable-hidden {
    display: none;
    visibility: hidden;
  }
}

<div>
  <nav
    class="emotion-0 emotion-1"
    dir="ltr"
    id="si-nav"
    role="navigation"
  >
    <div
      class="emotion-2 emotion-3"
    >
      <amp-state
        id="menuState"
      >
        <script
          type="application/json"
        >
          {"expanded":false}
        </script>
      </amp-state>
      <button
        aria-expanded="false"
        class="focusIndicatorRemove emotion-4 emotion-5"
        data-amp-bind-aria-expanded="menuState.expanded ? "true" : "false""
        dir="ltr"
        on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),
        si-nav-dropdown-menu.toggleVisibility,
        si-nav-scrollable.toggleClass(class=si-nav-scrollable-hidden),
        si-nav.toggleClass(class=si-nav-open)
      "
        type="button"
      >
        <svg
          aria-hidden="true"
          class="emotion-6 emotion-7"
          data-amp-bind-hidden="menuState.expanded"
          focusable="false"
          height="2.75rem"
          viewBox="0 0 44 44"
          width="2.75rem"
        >
          <path
            d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
          />
        </svg>
        <svg
          aria-hidden="true"
          class="emotion-6 emotion-7"
          data-amp-bind-hidden="!menuState.expanded"
          focusable="false"
          height="2.75rem"
          hidden=""
          viewBox="0 0 44 44"
          width="2.75rem"
        >
          <path
            d="M26.741 15L21.6 20.142 16.458 15 15 16.458l5.142 5.142L15 26.742l1.458 1.458 5.142-5.141 5.141 5.141 1.459-1.458-5.142-5.142 5.142-5.142z"
            fill-rule="evenodd"
          />
        </svg>
        <span
          class="emotion-10"
        >
          menu
        </span>
      </button>
      <div
        class="emotion-11 emotion-12"
        data-e2e="dropdown-nav"
        hidden=""
        id="si-nav-dropdown-menu"
      >
        <ul
          data-testid="dropdown"
        >
          <li>
            Dropdown Items
          </li>
        </ul>
      </div>
      <div
        class="emotion-13 emotion-14 emotion-15"
        data-e2e="scrollable-nav"
        dir="ltr"
        id="si-nav-scrollable"
      >
        <ul
          data-testid="scrollable-list"
        >
          <li>
            List Items
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>
`;