From 1488ae9a513d8a73081fb9c8aa71d3550d857af5 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Sun, 11 Jun 2017 22:06:47 +0200
Subject: [PATCH] ADD a search-field to the homepage

---
 docs/components/Homepage/MainLinks/index.js  | 115 ++++++++++++++-----
 docs/components/Homepage/MainLinks/style.css |  18 ++-
 docs/components/Homepage/UsedBy/index.jsx    |   7 +-
 docs/components/Homepage/UsedBy/style.css    |   8 +-
 4 files changed, 104 insertions(+), 44 deletions(-)

diff --git a/docs/components/Homepage/MainLinks/index.js b/docs/components/Homepage/MainLinks/index.js
index a4b93004903..6d08eda237e 100644
--- a/docs/components/Homepage/MainLinks/index.js
+++ b/docs/components/Homepage/MainLinks/index.js
@@ -1,39 +1,98 @@
 import React from 'react';
 import { Link } from 'react-router';
+import { UsedByBg } from '../UsedBy/';
 import './style.css';
 
 const MainLinks = () =>
-  <div id="main-links" className="row">
-    <div className="col-md-12">
-      <div className="row">
-        <div className="main-links-container">
-          <div className="col-xs-6 try-now">
-            <h2>Try Now</h2>
-            <pre>
-              <code>
-                npm i -g @storybook/cli<br />
-                cd my-react-app<br />
-                getstorybook<br />
-              </code>
-            </pre>
-          </div>
+  <div id="main-links">
+    <div className="main-links-container">
+      <div className="try-now">
+        <h2>Try Now</h2>
+        <pre>
+          <code>
+            npm i -g @storybook/cli<br />
+            cd my-react-app<br />
+            getstorybook<br />
+          </code>
+        </pre>
+      </div>
 
-          <div className="col-xs-6 read-docs">
-            <h2>Read Docs</h2>
-            <div className="">
-              <input type="search" className="form-control" id="search" placeholder="Search" />
-              <Link to="/basics/introduction/">
-                <svg version="1.1" x="0px" y="0px" viewBox="0 0 60 60">
-                  <g>
-                    <path d="M53.707,58.293L51,55.586v-35l-0.497-0.497L46,15.586V0H6v52h5v5h38.586l2.707,2.707C52.488,59.902,52.744,60,53,60s0.512-0.098,0.707-0.293C54.098,59.316,54.098,58.684,53.707,58.293z M47.586,20H36V8.414l10,10L47.586,20z M8,50V2h36v11.586l-8.089-8.089L35.414,5H11v45H8z M13,55v-3V7h21v15h15v31.586l-7.514-7.514c1.74-2.06,2.795-4.717,2.795-7.619c0-6.522-5.306-11.828-11.828-11.828s-11.828,5.306-11.828,11.828s5.306,11.828,11.828,11.828c2.902,0,5.559-1.055,7.619-2.795L47.586,55H13z M32.453,48.281c-5.419,0-9.828-4.409-9.828-9.828s4.409-9.828,9.828-9.828s9.828,4.409,9.828,9.828S37.872,48.281,32.453,48.281z" />
-                    <path d="M26.625,36h6c0.553,0,1-0.447,1-1s-0.447-1-1-1h-6c-0.553,0-1,0.447-1,1S26.072,36,26.625,36z" />
-                    <path d="M38.625,40h-12c-0.553,0-1,0.447-1,1s0.447,1,1,1h12c0.553,0,1-0.447,1-1S39.178,40,38.625,40z" />
-                  </g>
-                </svg>
-              </Link>
-            </div>
+      <div
+        className="row"
+        id="nav"
+        style={{
+          borderRight: '0 none',
+          position: 'relative',
+        }}
+      >
+        <UsedByBg
+          color="#a7d0ff"
+          style={{
+            transform: 'rotateY(180deg)',
+          }}
+        />
+        <div className="col-xs-12 read-docs">
+          <h2 style={{ color: '#6DABF5' }}>Documentation</h2>
+          <div
+            className="form-group has-feedback"
+            style={{ maxWidth: '450px', margin: '20px auto' }}
+          >
+            <label className="sr-only control-label" htmlFor="search">
+              Search storybook documentation
+            </label>
+            <input
+              className="form-control"
+              type="search"
+              id="search"
+              placeholder="type to search"
+            />
+            <span className="form-control-feedback" aria-hidden="true">🔍</span>
           </div>
         </div>
+
+        <div className="col-sm-4 read-docs">
+          <Link to="/basics/introduction/"><h3>Basics</h3></Link>
+          <ul>
+            <li><Link to="/basics/quick-start-guide/">Quick setup</Link></li>
+            <li><Link to="/basics/slow-start-guide/">Adding to existing project</Link></li>
+            <li><Link to="/basics/slow-start-guide/">Writing stories</Link></li>
+          </ul>
+        </div>
+
+        <div className="col-sm-4 read-docs">
+          <Link to="/configurations/default-config/"><h3>Configuration</h3></Link>
+          <ul>
+            <li><Link to="/configurations/custom-babel-config/">Babel configurations</Link></li>
+            <li>
+              <Link to="/configurations/custom-webpack-config/">Webpack configurations</Link>
+            </li>
+            <li>
+              <Link to="/configurations/add-custom-head-tags/">Custom scripts & styling</Link>
+            </li>
+            <li>
+              <Link to="/configurations/serving-static-files/">Serving static files</Link>
+            </li>
+          </ul>
+        </div>
+
+        <div className="col-sm-4 read-docs">
+          <Link to="/configurations/default-config/"><h3>Addons</h3></Link>
+          <ul>
+            <li><Link to="/addons/introduction/">Intro to Addons</Link></li>
+            <li>
+              <Link to="/addons/using-addons/">Using Addons</Link>
+            </li>
+            <li>
+              <Link to="/addons/addon-gallery/">Addon Gallery</Link>
+            </li>
+            <li>
+              <Link to="/addons/writing-addons/">Writing Addons</Link>
+            </li>
+            <li>
+              <Link to="/addons/api/">Api</Link>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>;
diff --git a/docs/components/Homepage/MainLinks/style.css b/docs/components/Homepage/MainLinks/style.css
index 103420dc9df..e91b64fb0ea 100644
--- a/docs/components/Homepage/MainLinks/style.css
+++ b/docs/components/Homepage/MainLinks/style.css
@@ -11,27 +11,25 @@
 }
 
 #main-links h2 {
-  text-transform: uppercase;
   text-align: center;
-  font-size: 25px;
-  font-weight: 600;
 }
 
 #main-links pre {
   background-color: #444;
   color: #DDD;
-  padding: 15px 30px;
+  padding: 15px 20px;
   line-height: 22px;
   border: 0;
   border-radius: 0;
 }
 
-.docs-img {
-  background: url('./images/docs.png');
-  background-repeat: no-repeat;
-  width: 40px;
-  height: 54px;
-  margin-top: 25px;
+.algolia-autocomplete {
+  display: block !important;
+}
+
+.try-now {
+  max-width: 450px;
+  margin: 40px auto;
 }
 
 @media only screen and (max-width: 700px) {
diff --git a/docs/components/Homepage/UsedBy/index.jsx b/docs/components/Homepage/UsedBy/index.jsx
index 18d359d9340..dcb0594a5a4 100644
--- a/docs/components/Homepage/UsedBy/index.jsx
+++ b/docs/components/Homepage/UsedBy/index.jsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { Link } from 'react-router';
 import './style.css';
 
-const UsedByBg = ({ color }) =>
-  <div className="used-by-bg">
+export const UsedByBg = ({ color, style }) =>
+  <div className="used-by-bg" style={style}>
     <svg
       width="100%"
       height="100%"
@@ -28,9 +28,12 @@ const UsedByBg = ({ color }) =>
   </div>;
 UsedByBg.propTypes = {
   color: PropTypes.string,
+  // eslint-disable-next-line
+  style: PropTypes.object,
 };
 UsedByBg.defaultProps = {
   color: 'white',
+  style: {},
 };
 
 const User = ({ logo, demo, site, title }) =>
diff --git a/docs/components/Homepage/UsedBy/style.css b/docs/components/Homepage/UsedBy/style.css
index dad2519757c..e4c0306f955 100644
--- a/docs/components/Homepage/UsedBy/style.css
+++ b/docs/components/Homepage/UsedBy/style.css
@@ -10,10 +10,10 @@
 
 .used-by-bg {
   position: absolute;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
+  top: -30px;
+  left: -30px;
+  right: -30px;
+  bottom: -30px;
 }
 
 .used-by-bg svg {