Merge pull request #239 from ebi-uniprot/2022_04-dropdown_header_refa…

…ctor 2022 04 dropdown header refactor
ebi-uniprot · May 1, 2022 · 1ea7d97 · 1ea7d97
2 parents be831f9 + 09873e5
commit 1ea7d97
Show file tree

Hide file tree

Showing 19 changed files with 540 additions and 424 deletions.
diff --git a/package.json b/package.json
@@ -47,10 +47,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "lines": 81.33,
-        "statements": 80.96,
+        "lines": 81.09,
+        "statements": 80.66,
         "functions": 78.93,
-        "branches": 71.31
+        "branches": 70.52
       }
     },
     "setupFilesAfterEnv": [

diff --git a/src/components/__tests__/__snapshots__/header.spec.tsx.snap b/src/components/__tests__/__snapshots__/header.spec.tsx.snap
@@ -12,69 +12,56 @@ exports[`Header component should render 1`] = `
         href="/"
       />
     </div>
-    <ul
+    <div
       class="header__navigation"
     >
-      <li>
-        <a
-          class="button tertiary"
-          href="/here"
-        >
-          <strong>
-            here
-          </strong>
-        </a>
-      </li>
-      <li>
-        <a
-          class="button tertiary"
-          href="/there"
-        >
-          there
-        </a>
-      </li>
-      <li>
-        <a
-          class="button tertiary"
-          href="www.ebi.ac.uk"
-          referrerpolicy="no-referrer-when-downgrade"
-          rel="noopener"
-          target="_blank"
-        >
-          EBI
-        </a>
-      </li>
-      <li>
+      <a
+        href="/here"
+      >
+        here
+      </a>
+      <a
+        href="/there"
+      >
+        there
+      </a>
+      <a
+        class="external-link"
+        href="www.ebi.ac.uk"
+        rel="noopener"
+        target="_blank"
+      >
+        EBI
+        <test-file-stub
+          data-testid="external-link-icon"
+          width="12.5"
+        />
+      </a>
+      <button
+        class="button primary"
+        type="button"
+      >
+        Action
+      </button>
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="dropdown"
+      >
         <button
           class="button tertiary"
           type="button"
         >
-          action
+          sub links
         </button>
-      </li>
-      <li>
-        <div
-          class="dropdown-container"
-        >
-          <button
-            class="button primary dropdown"
-            type="button"
-          >
-            sub links
-          </button>
-          <div
-            class="dropdown-menu"
-          />
-        </div>
-      </li>
-    </ul>
+      </div>
+    </div>
     <div
       class="header__search"
     >
       <form
         aria-label="Main search"
         class="main-search"
-        style="--main-button-color: #00639a;"
       >
         <div
           class="main-search__input-container"
@@ -96,34 +83,25 @@ exports[`Header component should render 1`] = `
     <div
       class="header__secondary"
     >
-      <ul
+      <div
         class="header__navigation"
       >
-        <li>
-          <a
-            class="button tertiary"
-            href="/"
-          >
-            <test-file-stub />
-          </a>
-        </li>
-        <li>
-          <a
-            class="button tertiary"
-            href="/"
-          >
-            <test-file-stub />
-          </a>
-        </li>
-        <li>
-          <a
-            class="button tertiary"
-            href="/"
-          >
-            <test-file-stub />
-          </a>
-        </li>
-      </ul>
+        <a
+          href="/"
+        >
+          <test-file-stub />
+        </a>
+        <a
+          href="/"
+        >
+          <test-file-stub />
+        </a>
+        <a
+          href="/"
+        >
+          <test-file-stub />
+        </a>
+      </div>
     </div>
   </div>
 </DocumentFragment>

diff --git a/src/components/__tests__/__snapshots__/main-search.spec.tsx.snap b/src/components/__tests__/__snapshots__/main-search.spec.tsx.snap
@@ -5,7 +5,6 @@ exports[`MainSearch component should render 1`] = `
   <form
     aria-label="Main search"
     class="main-search"
-    style="--main-button-color: #00639a;"
   >
     <div
       class="main-search__input-container"
@@ -31,20 +30,19 @@ exports[`MainSearch component should render with namespaces selector 1`] = `
   <form
     aria-label="Main search"
     class="main-search"
-    style="--main-button-color: #00639a;"
   >
     <div
-      class="dropdown-container"
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="dropdown"
     >
       <button
-        class="button primary dropdown"
+        class="button primary"
+        style="--main-button-color: #00639a;"
         type="button"
       >
         One
       </button>
-      <div
-        class="dropdown-menu"
-      />
     </div>
     <div
       class="main-search__input-container"

diff --git a/src/components/__tests__/__snapshots__/sequence.spec.tsx.snap b/src/components/__tests__/__snapshots__/sequence.spec.tsx.snap
@@ -9,17 +9,16 @@ exports[`Sequence component should render 1`] = `
       class="action-bar button-group"
     >
       <div
-        class="dropdown-container"
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="dropdown"
       >
         <button
-          class="button primary dropdown tertiary"
+          class="button tertiary"
           type="button"
         >
           Tools
         </button>
-        <div
-          class="dropdown-menu"
-        />
       </div>
       <a
         class="button tertiary"
@@ -30,17 +29,16 @@ exports[`Sequence component should render 1`] = `
         Download
       </a>
       <div
-        class="dropdown-container"
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="dropdown"
       >
         <button
-          class="button primary dropdown tertiary"
+          class="button tertiary"
           type="button"
         >
           Highlight
         </button>
-        <div
-          class="dropdown-menu"
-        />
       </div>
     </div>
     <div

diff --git a/src/components/__tests__/header.spec.tsx b/src/components/__tests__/header.spec.tsx
@@ -1,4 +1,14 @@
-import { BasketIcon, EnvelopeIcon, HelpIcon, MainSearch } from '..';
+import { Link } from 'react-router-dom';
+import {
+  BasketIcon,
+  Button,
+  EnvelopeIcon,
+  ExternalLink,
+  HelpIcon,
+  MainSearch,
+  Dropdown,
+} from '..';
+
 import renderWithRouter from '../../testHelpers/renderWithRouter';
 
 import Header from '../header';
@@ -7,26 +17,34 @@ describe('Header component', () => {
   it('should render', () => {
     const { asFragment } = renderWithRouter(
       <Header
-        items={[
-          { path: '/here', label: <strong>here</strong> },
-          { path: '/there', label: 'there' },
-          { href: 'www.ebi.ac.uk', label: 'EBI' },
-          { onClick: jest.fn(), label: 'action' },
-          {
-            items: [
-              { path: '/sub-link-a', label: 'sub link A' },
-              { path: '/sub-link-b', label: <span>sub link b</span> },
-            ],
-            label: 'sub links',
-          },
-        ]}
-        secondaryItems={[
-          { label: <HelpIcon />, path: '/' },
-          { label: <EnvelopeIcon />, path: '/' },
-          { label: <BasketIcon />, path: '/' },
-        ]}
+        secondaryItems={
+          <>
+            <Link to="/">
+              <HelpIcon />
+            </Link>
+            <Link to="/">
+              <EnvelopeIcon />
+            </Link>
+            <Link to="/">
+              <BasketIcon />
+            </Link>
+          </>
+        }
         search={<MainSearch onTextChange={jest.fn()} onSubmit={jest.fn()} />}
-      />
+      >
+        <Link to="/here">here</Link>
+        <Link to="/there">there</Link>
+        <ExternalLink url="www.ebi.ac.uk">EBI</ExternalLink>
+        <Button onClick={jest.fn()}>Action</Button>
+        <Dropdown
+          visibleElement={<Button variant="tertiary">sub links</Button>}
+        >
+          <Link to="/sub-link-a">sub link A</Link>
+          <Link to="/sub-link-b">
+            <span>sub link B</span>
+          </Link>
+        </Dropdown>
+      </Header>
     );
 
     expect(asFragment()).toMatchSnapshot();