Merge pull request #180 from vtex-apps/feature/mobile-search-bar

[SearchBar] Add mobileMode to change the layout in mobile devices.

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Add `compactMode` props that change the design of `SearchBar` component to a compact layout.
 
 ## [2.5.2] - 2018-11-07
 ### Changed

react/components/SearchBar/components/AutocompleteInput.js

@@ -1,23 +1,59 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
-import { Input } from 'vtex.styleguide'
-import IconSearch from '../images/IconSearch'
+import { Input, IconClose, IconSearch } from 'vtex.styleguide'
 
 /** Midleware component to adapt the styleguide/Input to be used by the Downshift*/
 export default class AutocompleteInput extends Component {
+
+  constructor(props) {
+    super(props)
+    this.inputClass = React.createRef();
+    this.changeClassInput = this.changeClassInput.bind(this)
+  }
+
+  changeClassInput() {
+    const { compactMode } = this.props
+    if (compactMode) {
+      this.inputClass.current.placeholder = ""
+    }
+  }
+
+  componentDidMount() {
+    this.changeClassInput()
+  }
+
   render() {
-    const { onGoToSearchPage, ...restProps } = this.props
 
+    const { onGoToSearchPage, onClearInput, compactMode, value, ...restProps } = this.props
+
+    const prefixIcon = (
+      compactMode ? <IconSearch color="#979899" /> : ""
+    )
     const suffixIcon = (
-      <span className="flex items-center pointer" onClick={onGoToSearchPage}>
-        <IconSearch color="#979899" />
-      </span>
+      compactMode ? !value ? "" :
+        <span className="flex items-center pointer" onClick={onClearInput} >
+          <IconClose className="pa0" size={10} color="#979899" />
+        </span>
+        :
+        <span className="flex items-center pointer" onClick={onGoToSearchPage}>
+          <IconSearch color="#979899" />
+        </span>
+    )
+
+    const classContainer = classNames(
+      'w-100',
+      {
+        'vtex-searchbar__compact-mode': compactMode
+      }
     )
 
     return (
       <div className="flex">
-        <Input size="large" {...restProps} suffixIcon={suffixIcon} />
+        <div className={classContainer}>
+          <Input ref={this.inputClass} size="large" value={value} {...restProps} suffixIcon={suffixIcon} prefix={prefixIcon} />
+        </div>
       </div>
     )
   }
@@ -40,4 +76,7 @@ AutocompleteInput.propTypes = {
   placeholder: PropTypes.string,
   /** Function to direct the user to the searchPage */
   onGoToSearchPage: PropTypes.func.isRequired,
+  compactMode: PropTypes.bool,
+  /** Clears the input */
+  onClearInput: PropTypes.func,
 }

react/components/SearchBar/components/ResultsList.js

@@ -7,7 +7,7 @@ import { Link } from 'render'
 import autocomplete from '../queries/autocomplete.gql'
 
 const listClassNames =
-  'vtex-results__list z-max absolute w-100 mt1 mt2-m shadow-3 bg-white f5 left-0'
+  'vtex-results__list z-max absolute w-100 mt1 mt2-m pb4 bg-white f5 left-0'
 const listItemClassNames =
   'vtex-results__item flex justify-start f5 pa4 pl6 outline-0'
 

react/components/SearchBar/components/SearchBar.js

@@ -1,10 +1,9 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-
+import classNames from 'classnames'
 import AutocompleteInput from './AutocompleteInput'
 import ResultsLits from './ResultsList'
 import DownshiftComponent from 'downshift'
-
 import { NoSSR } from 'render'
 
 export default class SearchBar extends Component {
@@ -19,6 +18,7 @@ export default class SearchBar extends Component {
       onClearInput,
       shouldSearch,
       inputValue,
+      compactMode
     } = this.props
 
     const fallback = (
@@ -31,8 +31,12 @@ export default class SearchBar extends Component {
       />
     )
 
+    const mainClasses = classNames(
+      'vtex-searchbar w-100'
+    )
+
     return (
-      <div className="vtex-searchbar w-100">
+      <div className={mainClasses}>
         <NoSSR onSSR={fallback}>
           <DownshiftComponent>
             {({
@@ -44,6 +48,8 @@ export default class SearchBar extends Component {
             }) => (
               <div className="relative-m w-100">
                 <AutocompleteInput
+                  compactMode={compactMode}
+                  onClearInput={onClearInput}
                   onGoToSearchPage={() => {
                     closeMenu()
                     onGoToSearchPage()
@@ -57,6 +63,7 @@ export default class SearchBar extends Component {
                       onEnterPress(event)
                     },
                   })}
+
                 />
                 {shouldSearch && isOpen ? (
                   <ResultsLits
@@ -98,4 +105,6 @@ SearchBar.propTypes = {
   onGoToSearchPage: PropTypes.func.isRequired,
   /** Function to clear the input */
   onClearInput: PropTypes.func.isRequired,
-}
+  /** Indentify when use the compact version of the component */
+  compactMode: PropTypes.bool,
+}

react/components/SearchBar/global.css

@@ -23,6 +23,13 @@
   border-radius: 1px;
 }
 
+.vtex-searchbar__compact-mode input{
+  border-top-style: none !important; 
+  border-left-style: none !important; 
+  border-right-style: none !important; 
+  border-bottom: 2px solid !important;
+}
+
 .vtex-searchbar .vtex-results__list {
   top: 100%;
 }
@@ -44,6 +51,6 @@
   .vtex-results__list {
     margin: 0px;
     max-height: calc(100vh - 6.2rem);
-    box-shadow: inset 0px 4px 4px 0 rgba(0, 0, 0, .2), 0px 4px 4px 0 rgba(0, 0, 0, .2);
+    box-shadow: inset 0px 2px 2px 0 rgba(0, 0, 0, .1);
   }
 }

react/components/SearchBar/index.js

@@ -64,7 +64,7 @@ class SearchBarContainer extends Component {
   }
 
   render() {
-    const { intl } = this.props
+    const { intl, compactMode } = this.props
     const { shouldSearch, inputValue } = this.state
 
     const placeholder = intl.formatMessage({
@@ -85,6 +85,7 @@ class SearchBarContainer extends Component {
         onEnterPress={this.handleEnterPress}
         onMakeSearch={this.handleMakeSearch}
         onInputChange={this.handleInputChange}
+        compactMode={compactMode}
       />
     )
   }
@@ -97,6 +98,10 @@ SearchBarContainer.contextTypes = {
 SearchBarContainer.propTypes = {
   /* Internationalization */
   intl: intlShape.isRequired,
+  /** Indentify when use the compact version of the component */
+  compactMode: PropTypes.bool,
 }
 
+
+
 export default injectIntl(SearchBarContainer)