From 503ab5c66ab524dfe36aed84a01899cd07ed2bc5 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Wed, 13 Dec 2017 15:53:19 +0100
Subject: Allow selection of result using keyboard

---
 src/client/react/components/presentational/Result.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Result.jsx b/src/client/react/components/presentational/Result.jsx
index a4a0b8e..80f65d4 100644
--- a/src/client/react/components/presentational/Result.jsx
+++ b/src/client/react/components/presentational/Result.jsx
@@ -1,10 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 import IconFromUserType from './IconFromUserType';
 
-const Result = ({ user }) => (
-  <div className="search__result">
+const Result = ({ user, selected }) => (
+  <div
+    className={classnames('search__result', {
+      'search__result--selected': selected,
+    })}
+  >
     <div className="search__icon-wrapper"><IconFromUserType userType={user.type} /></div>
     <div className="search__result__text">{user.value}</div>
   </div>
@@ -15,6 +20,7 @@ Result.propTypes = {
     value: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
   }).isRequired,
+  selected: PropTypes.bool.isRequired,
 };
 
 export default Result;
-- 
cgit v1.1