Fix accordion interaction in eCR Viewer summary (#2748)

* move top to nav-wrapper * remove sticky-nav class and add sticky to nav-wrapper * remove extra div around side nav * remove excess styles
CDCgov · Oct 11, 2024 · e47e68b · e47e68b
1 parent afe1e0a
commit e47e68b
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 114 deletions.
diff --git a/containers/ecr-viewer/src/app/tests/components/SideNav.test.tsx b/containers/ecr-viewer/src/app/tests/components/SideNav.test.tsx
@@ -113,7 +113,7 @@ describe("SectionConfig", () => {
     expect(screen.getByRole("navigation")).toHaveClass("top-550");
   });
   it("should have top0 when integrated viewer", () => {
-    delete process.env.NEXT_PUBLIC_NON_INTEGRATED_VIEWER;
+    process.env.NEXT_PUBLIC_NON_INTEGRATED_VIEWER = "false";
     render(<SideNav />);
     expect(screen.getByRole("navigation")).toHaveClass("top-0");
   });

diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/SideNav.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/SideNav.test.tsx.snap
@@ -2,111 +2,107 @@
 
 exports[`SectionConfig should match the snapshot 1`] = `
 <DocumentFragment>
-  <div
-    class="nav-wrapper"
+  <nav
+    class="nav-wrapper top-550"
   >
-    <nav
-      class="sticky-nav top-550"
+    <div
+      class="display-flex back-button-wrapper"
     >
-      <div
-        class="display-flex back-button-wrapper"
+      <a
+        class="back-button display-flex"
+        href="/"
+      >
+        <svg
+          aria-label="Back Arrow"
+          class="usa-icon usa-icon--size-3"
+          focusable="false"
+          height="1em"
+          role="img"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+          />
+        </svg>
+        Back to eCR Library
+      </a>
+    </div>
+    <ul
+      class="usa-sidenav"
+      data-testid="sidenav"
+    >
+      <li
+        class="usa-sidenav__item"
       >
         <a
-          class="back-button display-flex"
-          href="/"
+          class=""
+          href="#section-1"
         >
-          <svg
-            aria-label="Back Arrow"
-            class="usa-icon usa-icon--size-3"
-            focusable="false"
-            height="1em"
-            role="img"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-          Back to eCR Library
+          Section 1
         </a>
-      </div>
-      <ul
-        class="usa-sidenav"
-        data-testid="sidenav"
+      </li>
+      <li
+        class="usa-sidenav__item"
       >
-        <li
-          class="usa-sidenav__item"
-        >
-          <a
-            class=""
-            href="#section-1"
-          >
-            Section 1
-          </a>
-        </li>
-        <li
-          class="usa-sidenav__item"
+        <a
+          class=""
+          href="#section-2"
         >
-          <a
-            class=""
-            href="#section-2"
-          >
-            Section 2
-          </a>
-        </li>
-        <li
-          class="usa-sidenav__item"
+          Section 2
+        </a>
+      </li>
+      <li
+        class="usa-sidenav__item"
+      >
+        <ul
+          class="usa-sidenav__sublist"
+          data-testid="sidenav"
         >
-          <ul
-            class="usa-sidenav__sublist"
-            data-testid="sidenav"
+          <li
+            class="usa-sidenav__item"
           >
-            <li
-              class="usa-sidenav__item"
+            <a
+              class=""
+              href="#section-3"
             >
-              <a
-                class=""
-                href="#section-3"
-              >
-                Section 3
-              </a>
-            </li>
-            <li
-              class="usa-sidenav__item"
+              Section 3
+            </a>
+          </li>
+          <li
+            class="usa-sidenav__item"
+          >
+            <ul
+              class="usa-sidenav__sublist"
+              data-testid="sidenav"
             >
-              <ul
-                class="usa-sidenav__sublist"
-                data-testid="sidenav"
+              <li
+                class="usa-sidenav__item"
               >
-                <li
-                  class="usa-sidenav__item"
+                <a
+                  class=""
+                  href="#section-4"
                 >
-                  <a
-                    class=""
-                    href="#section-4"
-                  >
-                    Section 4
-                  </a>
-                </li>
-              </ul>
-            </li>
-            <li
-              class="usa-sidenav__item"
+                  Section 4
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li
+            class="usa-sidenav__item"
+          >
+            <a
+              class=""
+              href="#section-2---2"
             >
-              <a
-                class=""
-                href="#section-2---2"
-              >
-                Section 2 - 2
-              </a>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </nav>
-  </div>
+              Section 2 - 2
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
   <h2
     data-sectionid="section-1"
     id="section-1"

diff --git a/containers/ecr-viewer/src/app/view-data/components/SideNav.tsx b/containers/ecr-viewer/src/app/view-data/components/SideNav.tsx
@@ -218,17 +218,15 @@ const SideNav: React.FC = () => {
   let sideNavItems = buildSideNav(sectionConfigs);
 
   return (
-    <div className="nav-wrapper">
-      <nav
-        className={classNames("sticky-nav", {
-          "top-0": !isNonIntegratedViewer,
-          "top-550": isNonIntegratedViewer,
-        })}
-      >
-        <BackButton />
-        <UswdsSideNav items={sideNavItems} />
-      </nav>
-    </div>
+    <nav
+      className={classNames("nav-wrapper", {
+        "top-0": !isNonIntegratedViewer,
+        "top-550": isNonIntegratedViewer,
+      })}
+    >
+      <BackButton />
+      <UswdsSideNav items={sideNavItems} />
+    </nav>
   );
 };
 

diff --git a/containers/ecr-viewer/src/styles/custom-styles.scss b/containers/ecr-viewer/src/styles/custom-styles.scss
@@ -314,7 +314,7 @@ td {
 }
 
 .back-button {
-  margin-bottom:1.5rem;
+  margin-bottom: 1.5rem;
 }
 
 .content-wrapper {
@@ -326,19 +326,10 @@ td {
 .nav-wrapper {
   margin-top: 1.5rem;
   padding-top: .63rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
   width: $nav-wrapper-width;
   min-width: $nav-wrapper-width;
-}
-
-.sticky-nav {
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: auto;
   position: sticky;
-  min-width: 100%;
+  height: 100vh;
 }
 
 .ecr-viewer-container {
@@ -568,7 +559,7 @@ h3 {
   }
 }
 
-.condition-details-accordion{
+.condition-details-accordion {
   .usa-accordion__heading.border-accent-cool-darker {
     &:not(:first-child) {
       margin-top: 1.12rem;