BUG-9246 — Fix mobile menu (#9250)

* Update pds-toolkit-react to dev.168

* Add PDS GlobalWrapper and standardize mobile breakpoint

* Update index.js

Update PDS `InputText` for `TextInput` — the former is deprecated and will be removed before PDS 1.0.0 release.

gatsby-browser.js

@@ -1,6 +1,10 @@
 import React from "react"
 import { location, globalHistory } from "@reach/router"
 
+// Import PDS Global wrapper for applying global context providers.
+import { GlobalWrapper } from "@pantheon-systems/pds-toolkit-react"
+import { MOBILE_MENU_BREAKPOINT } from './src/vars/responsive'
+
 // Import PDS core styles.
 import "./node_modules/@pantheon-systems/pds-toolkit-react/_dist/css/pds-core.css"
 import "./node_modules/@pantheon-systems/pds-toolkit-react/_dist/css/pds-layouts.css"
@@ -42,3 +46,8 @@ export const onRouteUpdate = () => {
 export const onInitialClientRender = () => {
   window.dispatchEvent(new Event("resize"))
 }
+
+// Global context providers
+export const wrapRootElement = ({ element }) => {
+  return <GlobalWrapper mobileMenuMaxWidth={MOBILE_MENU_BREAKPOINT}>{element}</GlobalWrapper>
+}

gatsby-ssr.js

@@ -1,5 +1,9 @@
 import React from 'react'
 
+// Import PDS Global wrapper for applying global context providers.
+import { GlobalWrapper } from "@pantheon-systems/pds-toolkit-react"
+import { MOBILE_MENU_BREAKPOINT } from './src/vars/responsive'
+
 /*
  * Add global scripts to ensure Bootstrap and jQuery JS is included
  */
@@ -15,3 +19,8 @@ export const onRenderBody = ({ setPostBodyComponents }) => {
       }
   ])
 }
+
+// Global context providers
+export const wrapRootElement = ({ element }) => {
+  return <GlobalWrapper mobileMenuMaxWidth={MOBILE_MENU_BREAKPOINT}>{element}</GlobalWrapper>
+}

src/layout/SearchBar/index.js

@@ -2,7 +2,7 @@ import React from "react"
 import { Link } from "gatsby"
 
 import AddSearch from "../../components/addSearch"
-import { InputText } from "@pantheon-systems/pds-toolkit-react"
+import { TextInput } from "@pantheon-systems/pds-toolkit-react"
 
 import "./style.css"
 
@@ -16,13 +16,13 @@ const SearchBar = ({ page }) => (
     title="Search Pantheon Documentation"
     className="pds-spacing-pad-block-start-l pds-spacing-pad-block-end-2xl"
   >
-    <InputText
+    <TextInput
       id="search"
-      aria-label="Search Pantheon Documentation"
       placeholder="Search Pantheon Documentation"
       type="search"
       data-addsearch-id="search_widget"
-      label=" "
+      label="Search Pantheon Documentation"
+      showLabel={false}
     />
     {page == "default" ? <AddSearch /> : null}
   </form>

src/layout/header/index.js

@@ -6,6 +6,8 @@ import {
   NavMenu,
 } from "@pantheon-systems/pds-toolkit-react"
 
+import { MOBILE_MENU_BREAKPOINT } from '../../vars/responsive'
+
 import "./style.css"
 
 // Links for NavMenu component.
@@ -118,20 +120,19 @@ const mainNavigationLinks = [
   },
 ]
 
-const mobileMenuBreakpoint = 900
 
 const Header = ({ page }) => (
   <>
     <a id="skip-to-main" className="pds-skiplink" href="#docs-main">
       Skip to main content
     </a>
 
-    <Navbar mobileMenuMaxWidth={mobileMenuBreakpoint}>
+    <Navbar>
       <NavMenu
         slot="items-left"
         ariaLabel="Main Navigation"
         menuItems={mainNavigationLinks}
-        mobileMenuMaxWidth={mobileMenuBreakpoint}
+        mobileMenuMaxWidth={MOBILE_MENU_BREAKPOINT}
       />
       <div slot="items-right" className="pds-button-group">
         <a

src/vars/responsive.js

@@ -0,0 +1 @@
+export const MOBILE_MENU_BREAKPOINT = 900