Search improvements (#76)

* Search improvements

* Search results keyboard navigation

frontend/components/CenteredContent/CenteredContent.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import styles from './CenteredContent.scss';
+import styled from 'styled-components';
 
 type Props = {
   children?: React.Element<any>,
@@ -8,21 +8,27 @@ type Props = {
   maxWidth?: string,
 };
 
-const CenteredContent = (props: Props) => {
-  const style = {
-    maxWidth: props.maxWidth,
-    ...props.style,
+const Container = styled.div`
+  width: 100%;
+  margin: 40px 20px;
+`;
+
+const CenteredContent = ({
+  children,
+  maxWidth = '740px',
+  style,
+  ...rest
+}: Props) => {
+  const styles = {
+    maxWidth,
+    ...style,
   };
 
   return (
-    <div className={styles.content} style={style}>
-      {props.children}
-    </div>
+    <Container style={styles} {...rest}>
+      {children}
+    </Container>
   );
 };
 
-CenteredContent.defaultProps = {
-  maxWidth: '740px',
-};
-
 export default CenteredContent;

frontend/components/CenteredContent/CenteredContent.scss

@@ -1,4 +0,0 @@
-.content {
-  width: 100%;
-  margin: 40px 20px;
-}

frontend/components/DocumentPreview/DocumentPreview.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import React, { Component } from 'react';
 import { toJS } from 'mobx';
 import { Link } from 'react-router-dom';
 import type { Document } from 'types';
@@ -10,26 +10,34 @@ import PublishingInfo from 'components/PublishingInfo';
 
 type Props = {
   document: Document,
+  innerRef?: Function,
 };
 
-const Container = styled.div`
-  width: 100%;
-  padding: 20px 0;
-`;
-
 const DocumentLink = styled(Link)`
   display: block;
-  margin: -16px;
+  margin: 16px -16px;
   padding: 16px;
   border-radius: 8px;
+  border: 2px solid transparent;
+  max-height: 50vh;
+  overflow: hidden;
+  width: 100%;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: ${color.smokeLight};
+    border: 2px solid ${color.smoke};
+    outline: none;
+  }
+
+  &:focus {
+    border: 2px solid ${color.slateDark};
+  }
 
   h1 {
     margin-top: 0;
   }
-
-  &:hover {
-    background: ${color.smokeLight};
-  }
 `;
 
 // $FlowIssue
@@ -37,10 +45,14 @@ const TruncatedMarkdown = styled(Markdown)`
   pointer-events: none;
 `;
 
-const DocumentPreview = ({ document }: Props) => {
-  return (
-    <Container>
-      <DocumentLink to={document.url}>
+class DocumentPreview extends Component {
+  props: Props;
+
+  render() {
+    const { document, innerRef, ...rest } = this.props;
+
+    return (
+      <DocumentLink to={document.url} innerRef={innerRef} {...rest}>
         <PublishingInfo
           createdAt={document.createdAt}
           createdBy={document.createdBy}
@@ -50,8 +62,8 @@ const DocumentPreview = ({ document }: Props) => {
         />
         <TruncatedMarkdown text={document.text} limit={150} />
       </DocumentLink>
-    </Container>
-  );
-};
+    );
+  }
+}
 
 export default DocumentPreview;