From 7e63aa14ea4298a1511f75e875ca001d2bd61ee8 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Sun, 10 Dec 2017 13:53:07 +0100 Subject: Add results --- .../react/components/presentational/Search.jsx | 30 ++++++++++++++++------ src/client/react/reducers/search.js | 2 +- src/client/static/bundle.css | 17 +++++++++--- src/client/style/index.scss | 23 ++++++++++++++--- 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 }) => ( +
+
+
{user.value}
+
+); + +Result.propTypes = { + user: PropTypes.shape(userShape).isRequired, +}; const Search = ({ onInputChange, @@ -11,7 +28,7 @@ const Search = ({ value, results, }) => ( -
+
0 })}>
-
    - {results.map(result =>
  • {result.name}
  • )} -
+ {results.map(user => ( + + ))}
); @@ -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); + } + } } -- cgit v1.1