[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