Add results

4 files changed, 56 insertions, 16 deletions

diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index 01c6f7d..40cd3e8 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -2,6 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import SearchIcon from 'react-icons/lib/md/search';
+import PersonIcon from 'react-icons/lib/md/person';
+
+const userShape = {
+  value: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+};
+
+const Result = ({ user }) => (
+  <div className="search__result">
+    <div className="search__icon-wrapper"><PersonIcon /></div>
+    <div className="search__result__text">{user.value}</div>
+  </div>
+);
+
+Result.propTypes = {
+  user: PropTypes.shape(userShape).isRequired,
+};
 
 const Search = ({
   onInputChange,
@@ -11,7 +28,7 @@ const Search = ({
   value,
   results,
 }) => (
-  <div className={classnames('search', { focus: hasFocus })}>
+  <div className={classnames('search', { 'search--has-focus': hasFocus, 'search--has-results': results.length > 0 })}>
     <div className="search__input-wrapper">
       <div className="search__icon-wrapper"><SearchIcon /></div>
       <input
@@ -22,9 +39,9 @@ const Search = ({
         onBlur={onBlur}
       />
     </div>
-    <ul>
-      {results.map(result => <li key={result.name}>{result.name}</li>)}
-    </ul>
+    {results.map(user => (
+      <Result key={user.value} user={user} />
+    ))}
   </div>
 );
 
@@ -34,10 +51,7 @@ Search.propTypes = {
   onBlur: PropTypes.func.isRequired,
   hasFocus: PropTypes.bool.isRequired,
   value: PropTypes.string.isRequired,
-  results: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-  })).isRequired,
+  results: PropTypes.arrayOf(PropTypes.shape(userShape)).isRequired,
 };
 
 export default Search;
diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js
index a695184..50233a7 100644
--- a/src/client/react/reducers/search.js
+++ b/src/client/react/reducers/search.js
@@ -11,7 +11,7 @@ const search = (state = DEFAULT_STATE, action) => {
         ...state,
         searchInput: action.typedValue,
         searchResults: [
-          { type: 's', name: '18561' },
+          { type: 's', value: '18561' },
         ],
       };
     case 'SEARCH/FOCUS_CHANGE':
diff --git a/src/client/static/bundle.css b/src/client/static/bundle.css
index d04fba6..5755992 100644
--- a/src/client/static/bundle.css
+++ b/src/client/static/bundle.css
@@ -1,15 +1,18 @@
 body {
-  background-color: #ececec; }
+  background-color: #ececec;
+  font-family: 'Roboto'; }
 
 * {
   box-sizing: border-box; }
 
 .search {
   width: 580px;
-  height: 54px;
+  border-radius: 2px;
   background-color: white; }
-  .search.focus {
+  .search--has-focus {
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
+  .search--has-results .search__input-wrapper {
+    border-bottom: 1px #BDBDBD solid; }
   .search__icon-wrapper {
     height: 54px;
     padding: 15px; }
@@ -18,7 +21,6 @@ body {
       width: 24px; }
   .search__input-wrapper {
     display: flex;
-    widows: inherit;
     height: 54px; }
     .search__input-wrapper input {
       border: 0;
@@ -28,3 +30,10 @@ body {
       padding: 16px;
       padding-left: 0px;
       font-size: 16px; }
+  .search__result {
+    display: flex; }
+    .search__result__text {
+      padding: 15px;
+      padding-left: 0px;
+      font-size: 16px;
+      transform: translate(0, 3px); }
diff --git a/src/client/style/index.scss b/src/client/style/index.scss
index 6f1592c..d7d8b01 100644
--- a/src/client/style/index.scss
+++ b/src/client/style/index.scss
@@ -1,5 +1,6 @@
 body {
   background-color: #ececec;
+  font-family: 'Roboto';
 }
 
 * {
@@ -8,13 +9,19 @@ body {
 
 .search {
   width: 580px;
-  height: 54px;
+  border-radius: 2px;
   background-color: white;
 
-  &.focus {
+  &--has-focus {
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   }
 
+  &--has-results {
+    .search__input-wrapper {
+      border-bottom: 1px #BDBDBD solid;
+    }
+  }
+
   &__icon-wrapper {
     height: 54px;
     padding: 15px;
@@ -26,7 +33,6 @@ body {
 
   &__input-wrapper {
     display: flex;
-    widows: inherit;
     height: 54px;
 
     input {
@@ -39,4 +45,15 @@ body {
       font-size: 16px;
     }
   }
+
+  &__result {
+    display: flex;
+
+    &__text {
+      padding: 15px;
+      padding-left: 0px;
+      font-size: 16px;
+      transform: translate(0, 3px);
+    }
+  }
 }