Revert "Fix Popover component; add skiplink (#8732)"

This reverts commit b084419.

gatsby-browser.js

@@ -8,7 +8,7 @@ import "./node_modules/@pantheon-systems/pds-toolkit-react/_dist/css/pds-compone
 
 // Global styles
 import "./src/styles/main.css"
-import "./src/styles/pds-additions.css"
+import "./src/styles/hacks.css"
 
 // custom typefaces
 import "prismjs/themes/prism-okaidia.css"

source/data/landings.yaml

@@ -775,7 +775,6 @@
 - title: "Guides"
   subtitle: ""
   path: "guides"
-  footer_border: true
   guides:
     - title: ""
       type: "normal"
@@ -1167,7 +1166,6 @@
 - title: "Account Management at Pantheon"
   subtitle: "Learn how to set up your teams, use your dashboards, and how billing works. You should be able to comfortably develop an organization plan and administer your Pantheon platform after reading these guides."
   path: "manage"
-  footer_border: true
   guides:
     - title: ""
       type: "normal"

src/components/card/index.js

@@ -29,11 +29,7 @@ const Card = ({ title, isOfficial, author, authorLink, link, children }) => {
       </div>
 
       <div className="plugin-card__link">
-        <a
-          href={link}
-          target="_blank"
-          className="pds-button pds-button--secondary"
-        >
+        <a href={link} target="_blank" className="pds-button">
           Get plugin
           <Icon
             iconName="externalLink"

src/components/headerBody/index.js

@@ -40,7 +40,11 @@ const HeaderBody = ({
             {lastReviewed}
           </time>
         </p> */}
-        {!subtitle && <h1 className="docs-title">{title}</h1>}
+        {!subtitle && (
+          <h1 className="docs-title" id="docs-main">
+            {title}
+          </h1>
+        )}
 
         {subtitle && <h1>{subtitle}</h1>}
 

src/components/navButtons/index.js

@@ -16,24 +16,26 @@ const NavButtons = ({
       justifyContent="between"
       className="pds-spacing-mar-block-start-m pds-spacing-mar-block-end-xl"
     >
-      <ul className="pagination pager-guides">
-        {prev && (
-          <li className="pagination__prev">
+      {prev && (
+        <ul className="pagination pager-guides">
+          <li>
             <Link to={prev} rel="prev" className="pds-button">
               <Icon iconName="angleLeft"></Icon>
               {prevTitle}
             </Link>
           </li>
-        )}
-        {next && (
-          <li className="pagination__next">
-            <Link to={next} rel="next" className="pds-button">
+        </ul>
+      )}
+      {next && (
+        <ul className="pagination pager-guides">
+          <li>
+            <Link to={next} rel="prev" className="pds-button">
               {nextTitle}
               <Icon iconName="angleRight"></Icon>
             </Link>
           </li>
-        )}
-      </ul>
+        </ul>
+      )}
     </FlexContainer>
   )
 }

src/components/navButtons/style.css

@@ -1,11 +1,4 @@
 ul.pagination {
   list-style-type: none;
   padding: 0;
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-}
-
-ul.pagination:has(li.pagination__prev) {
-  justify-content: space-between;
 }

src/components/navbar/index.js

@@ -1,50 +1,40 @@
 import React from "react"
 import NavbarItem from "../navbarItem"
-
-import { ExpansionPanel } from "@pantheon-systems/pds-toolkit-react"
-
 import "./style.css"
 
 const Navbar = ({ title, items, activePage }) => {
-  const menu = (
-    <ul id="manual-guide-toc" className="manual-guide-toc__menu">
-      {items.map((item) => {
-        return (
-          <NavbarItem
-            key={`${item.id}-item-key`}
-            item={item}
-            activePage={activePage}
-          />
-        )
-      })}
-    </ul>
-  )
-
   return (
-    <>
-      {/* Mobile nav */}
-      <nav
-        className="manual-guide-toc guide-nav--mobile"
-        aria-labelledby="guide-nav"
+    <nav className="manual-guide-toc" aria-labelledby="guide-nav">
+      <button
+        type="button"
+        className="navbar-toggle"
+        data-toggle="collapse"
+        data-target="#guide-collapse"
+        data-original-title=""
+        title=""
       >
-        <ExpansionPanel
-          items={[{ label: title, content: menu }]}
-          className="guide-nav__expansion-panel"
-        />
-      </nav>
-
-      {/* Desktop/default nav */}
-      <nav
-        className="manual-guide-toc guide-nav--default"
-        aria-labelledby="guide-nav"
-      >
-        <h2 id="guide-nav" className="manual-guide-toc__heading">
-          {title}
-        </h2>
-
-        {items && menu}
-      </nav>
-    </>
+        <span className="sr-only">Toggle navigation</span>
+        <i className="fa fa-bars" />
+      </button>
+      <h2 id="guide-nav" className="manual-guide-toc__heading">
+        {title}
+      </h2>
+      <div className="collapse navbar-collapse" id="guide-collapse">
+        {items && (
+          <ul id="manual-guide-toc" className="manual-guide-toc__menu">
+            {items.map((item) => {
+              return (
+                <NavbarItem
+                  key={`${item.id}-item-key`}
+                  item={item}
+                  activePage={activePage}
+                />
+              )
+            })}
+          </ul>
+        )}
+      </div>
+    </nav>
   )
 }