[docs] adds docs-wide search component (#8349)

* update dr-ui, mr-ui * add search component * adjust columns to prevent overlap
mapbox · Jun 13, 2019 · af06222 · af06222
1 parent 16f7de5
commit af06222
Show file tree

Hide file tree

Showing 3 changed files with 476 additions and 22 deletions.
diff --git a/docs/components/page_shell.js b/docs/components/page_shell.js
@@ -18,10 +18,12 @@ import { overviewNavigation } from '../data/overview-navigation';
 import { styleSpecNavigation } from '../data/style-spec-navigation';
 import { plugins } from '../data/plugins';
 import { routeToPrefixed } from '@mapbox/batfish/modules/route-to';
-
+import Search from '@mapbox/dr-ui/search';
 
 const slugger = new GithubSlugger();
 
+const site = "Mapbox GL JS";
+
 class PageShell extends React.Component {
 
     componentDidMount() {
@@ -212,12 +214,12 @@ class PageShell extends React.Component {
 
         const sidebarProps = this.getSidebarProps(activeTab);
         const topbarContent = {
-            productName: "Mapbox GL JS",
+            productName: site,
             topNav: <TopNavTabs activeTab={activeTab} />
         };
 
         return (
-            <ReactPageShell site="Mapbox GL JS" darkHeaderText={true} includeFooter={false} {...this.props}>
+            <ReactPageShell site={site} darkHeaderText={true} includeFooter={false} {...this.props}>
                 <Helmet>
                     <link
                         rel="canonical"
@@ -227,17 +229,22 @@ class PageShell extends React.Component {
                 <div className="shell-header-buffer" />
                 <TopbarSticker unStickWidth={980}>
                     <div className="limiter">
-                        <div className="grid grid--gut36 mr-neg36 mr0-mm">
+                        <div className="grid">
                             <div className={`col col--4-mm ${sidebarProps.sidebarColSize ? `col--${sidebarProps.sidebarColSize}-ml` : ''} col--12`}>
                                 <div className="ml24-mm pt12">
                                     <ProductMenu productName={topbarContent.productName} homePage='/mapbox-gl-js/'/>
                                 </div>
                             </div>
-                            <div className={`col col--8-mm ${sidebarProps.sidebarColSize ? `col--${12 - sidebarProps.sidebarColSize}-ml` : ''} col--12`}>
+                            <div className={`col col--6-mm ${sidebarProps.sidebarColSize ? `col--${10 - sidebarProps.sidebarColSize}-ml` : ''} col--12`}>
                                 <div style={{ height: '50px' }}>
                                     {topbarContent.topNav}
                                 </div>
                             </div>
+                            <div className="col col--2-mm col--12">
+                                <div className="flex-parent-mm flex-parent--end-main h-full-mm wmax300 wmax-full-mm " style={{margin: '7px 0'}}>
+                                    <Search site={site} />
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </TopbarSticker>

diff --git a/package.json b/package.json
@@ -42,13 +42,13 @@
     "@mapbox/appropriate-images": "^2.0.0",
     "@mapbox/appropriate-images-react": "^1.0.0",
     "@mapbox/batfish": "1.9.8",
-    "@mapbox/dr-ui": "0.6.0",
+    "@mapbox/dr-ui": "0.15.2",
     "@mapbox/flow-remove-types": "^1.3.0-await.upstream.2",
     "@mapbox/gazetteer": "^3.1.2",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.1",
     "@mapbox/mapbox-gl-test-suite": "file:test/integration",
     "@mapbox/mbx-assembly": "^0.28.2",
-    "@mapbox/mr-ui": "0.5.0",
+    "@mapbox/mr-ui": "0.7.1",
     "@octokit/rest": "^15.15.1",
     "babel-eslint": "^10.0.1",
     "benchmark": "^2.1.4",