[www] add search input to home page (#3662)

* Experiment adding search input to home page * Prettier * Comment unused imports * Display social icons when viewport is wide enough * Use alternate colours at Hd breakpoint on home page
gatsbyjs · Feb 2, 2018 · 7588004 · 7588004
1 parent 4c9afab
commit 7588004
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 68 deletions.
diff --git a/www/src/components/navigation.js b/www/src/components/navigation.js
@@ -1,10 +1,9 @@
 import React from "react"
 import Link from "gatsby-link"
-import GithubIcon from "react-icons/lib/go/mark-github"
 import TwitterIcon from "react-icons/lib/fa/twitter"
-
-import SearchForm from "../components/search-form"
 import DiscordIcon from "../components/discord"
+import GithubIcon from "react-icons/lib/go/mark-github"
+import SearchForm from "../components/search-form"
 import logo from "../logo.svg"
 import typography, { rhythm, scale } from "../utils/typography"
 import presets, { colors } from "../utils/presets"
@@ -163,9 +162,11 @@ export default ({ pathname }) => {
             marginLeft: `auto`,
           }}
         >
-          {!isHomepage && (
-            <SearchForm key="SearchForm" styles={{ ...navItemStyles }} />
-          )}
+          <SearchForm
+            key="SearchForm"
+            iconStyles={{ ...socialIconsStyles }}
+            isHomepage={isHomepage}
+          />
           <a
             href="https://github.com/gatsbyjs/gatsby"
             title="GitHub"
@@ -176,27 +177,36 @@ export default ({ pathname }) => {
           >
             <GithubIcon style={{ verticalAlign: `text-top` }} />
           </a>
-          <a
-            href="https://discord.gg/0ZcbPKXt5bZjGY5n"
-            title="Discord"
-            css={{
-              ...navItemStyles,
-              ...socialIconsStyles,
-            }}
-          >
-            <DiscordIcon overrideCSS={{ verticalAlign: `text-top` }} />
-          </a>
-          <a
-            href="https://twitter.com/gatsbyjs"
-            title="@gatsbyjs"
+
+          <div
             css={{
-              ...navItemStyles,
-              ...socialIconsStyles,
-              paddingRight: 0,
+              display: `none`,
+              [presets.Desktop]: { display: !isHomepage && `inline-block` },
+              [presets.Hd]: { display: `inline-block` },
             }}
           >
-            <TwitterIcon style={{ verticalAlign: `text-top` }} />
-          </a>
+            <a
+              href="https://discord.gg/0ZcbPKXt5bZjGY5n"
+              title="Discord"
+              css={{
+                ...navItemStyles,
+                ...socialIconsStyles,
+              }}
+            >
+              <DiscordIcon overrideCSS={{ verticalAlign: `text-top` }} />
+            </a>
+            <a
+              href="https://twitter.com/gatsbyjs"
+              title="@gatsbyjs"
+              css={{
+                ...navItemStyles,
+                ...socialIconsStyles,
+                paddingRight: 0,
+              }}
+            >
+              <TwitterIcon style={{ verticalAlign: `text-top` }} />
+            </a>
+          </div>
         </div>
       </div>
     </div>

diff --git a/www/src/components/search-form.js b/www/src/components/search-form.js
@@ -2,11 +2,15 @@ import React, { Component } from "react"
 import PropTypes from "prop-types"
 import { navigateTo } from "gatsby-link"
 import { rhythm } from "../utils/typography"
+
 import presets, { colors } from "../utils/presets"
 import hex2rgba from "hex2rgba"
+import SearchIcon from './search-icon'
 
 import { css } from "glamor"
 
+const { curveDefault, speedDefault } = presets.animation
+
 // Override default search result styles (docsearch.css)
 css.insert(`
   .algolia-autocomplete .ds-dropdown-menu {
@@ -227,7 +231,7 @@ css.insert(`
 class SearchForm extends Component {
   constructor() {
     super()
-    this.state = { enabled: true }
+    this.state = { enabled: true, focussed: false }
     this.autocompleteSelected = this.autocompleteSelected.bind(this)
     this.focusSearchInput = this.focusSearchInput.bind(this)
   }
@@ -293,12 +297,12 @@ class SearchForm extends Component {
   }
 
   render() {
-    const { enabled } = this.state
-    const { styles } = this.props.styles
+    const { enabled, focussed } = this.state
+    const { iconStyles, isHomepage } = this.props
+
     return enabled ? (
       <form
         css={{
-          ...styles,
           display: `flex`,
           flex: `0 0 auto`,
           flexDirection: `row`,
@@ -309,52 +313,83 @@ class SearchForm extends Component {
         className="searchWrap"
         onSubmit={e => e.preventDefault()}
       >
-        <input
-          id="doc-search"
-          css={{
-            appearance: `none`,
-            background: `transparent`,
-            border: 0,
-            color: colors.gatsby,
-            paddingTop: rhythm(1 / 8),
-            paddingRight: rhythm(1 / 4),
-            paddingBottom: rhythm(1 / 8),
-            paddingLeft: rhythm(1),
-            backgroundImage: `url(/search.svg)`,
-            backgroundSize: `16px 16px`,
-            backgroundRepeat: `no-repeat`,
-            backgroundPositionY: `center`,
-            backgroundPositionX: `5px`,
-            overflow: `hidden`,
-            width: rhythm(1),
-            transition: `width 0.2s ease`,
-
-            ":focus": {
-              outline: 0,
-              backgroundColor: colors.ui.light,
+        <label css={{ position: `relative` }}>
+          <input
+            id="doc-search"
+            css={{
+              appearance: `none`,
+              backgroundColor: `transparent`,
+              border: 0,
               borderRadius: presets.radiusLg,
-              width: rhythm(5),
-            },
-
-            [presets.Desktop]: {
-              width: rhythm(5),
-            },
-          }}
-          type="search"
-          placeholder="Search docs"
-          aria-label="Search docs"
-          title="Hit 's' to search docs"
-          ref={input => {
-            this.searchInput = input
-          }}
-        />
+              color: colors.gatsby,
+              paddingTop: rhythm(1 / 8),
+              paddingRight: rhythm(1 / 4),
+              paddingBottom: rhythm(1 / 8),
+              paddingLeft: rhythm(1),
+              overflow: `hidden`,
+              width: rhythm(1),
+              transition: `width ${speedDefault} ${curveDefault}, background-color ${speedDefault} ${curveDefault}`,
+              ":focus": {
+                outline: 0,
+                backgroundColor: colors.ui.light,
+                borderRadius: presets.radiusLg,
+                width: rhythm(5),
+                transition: `width ${speedDefault} ${curveDefault}, background-color ${speedDefault} ${curveDefault}`,
+              },
+
+              [presets.Desktop]: {
+                backgroundColor: !isHomepage && `#fff`,
+                color: colors.gatsby,
+                width: !isHomepage && rhythm(5),
+                ":focus": {
+                  backgroundColor: colors.ui.light,
+                  color:  colors.gatsby,
+                },
+              },
+
+              [presets.Hd]: {
+                backgroundColor: isHomepage && colors.lilac,
+                color: isHomepage && colors.ui.light,
+                width: isHomepage && rhythm(5),
+              },
+            }}
+            type="search"
+            placeholder="Search docs"
+            aria-label="Search docs"
+            title="Hit 's' to search docs"
+            onFocus={() => this.setState({ focussed: true })}
+            onBlur={() => this.setState({ focussed: false })}
+            ref={input => {
+              this.searchInput = input
+            }}
+          />
+          <SearchIcon
+            overrideCSS={{
+              ...iconStyles,
+              fill: focussed && colors.gatsby,
+              position: `absolute`,
+              left: `5px`,
+              top: `50%`,
+              width: `16px`,
+              height: `16px`,
+              pointerEvents: `none`,
+              transition: `fill ${speedDefault} ${curveDefault}`,
+              transform: `translateY(-50%)`,
+
+              [presets.Hd]: {
+                fill: focussed && isHomepage && colors.gatsby,
+              },
+            }}
+          />
+        </label>
       </form>
     ) : null
   }
 }
 
 SearchForm.propTypes = {
-  styles: PropTypes.object,
+  isHomepage: PropTypes.bool,
+  iconStyles: PropTypes.object,
 }
 
 export default SearchForm
diff --git a/www/src/components/search-icon.js b/www/src/components/search-icon.js
@@ -0,0 +1,22 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const SearchIcon = ({ overrideCSS }) => (
+  <svg
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    css={{ ...overrideCSS }}
+  >
+    {/* Based on the 'search' icon in https://github.com/ionic-team/ionicons */}
+    <g>
+      <path d="m34.8 30.2c0.3 0.3 0.3 0.8 0 1.1l-3.4 3.5c-0.1 0.1-0.4 0.2-0.6 0.2s-0.4-0.1-0.6-0.2l-6.5-6.8c-2 1.2-4.1 1.8-6.3 1.8-6.8 0-12.4-5.5-12.4-12.4s5.6-12.4 12.4-12.4 12.4 5.5 12.4 12.4c0 2.1-0.6 4.2-1.7 6.1z m-17.4-20.4c-4.1 0-7.6 3.4-7.6 7.6s3.5 7.6 7.6 7.6 7.5-3.4 7.5-7.6-3.3-7.6-7.5-7.6z" />
+    </g>
+  </svg>
+)
+
+SearchIcon.propTypes = {
+  overrideCSS: PropTypes.object,
+}
+
+export default SearchIcon
diff --git a/www/static/search.svg b/www/static/search.svg