fedordead · DaveOrDead · Aug 19, 2016 · Aug 19, 2016 · Aug 19, 2016 · Aug 19, 2016
diff --git a/.eslintrc b/.eslintrc
@@ -161,7 +161,7 @@
     "semi": [2, "always"],
     "semi-spacing": 0,
     "sort-vars": 0,
-    "keyword-spacing": [2, { "before": false, "after": true }],
+    "keyword-spacing": [2, { "before": true, "after": true }],
     "space-before-blocks": [2, "always"],
     "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
     "space-in-brackets": 0,

diff --git a/demo/css/main.css b/demo/css/main.css
@@ -34,3 +34,30 @@ body {
 .dialog.is-active {
     display: block !important;
 }
+
+.c-typeahead__dropdown {
+    display: none;
+}
+
+.c-typeahead__dropdown.is-active {
+    display: block !important;
+}
+
+.c-typeahead__dropdown {
+    border: 1px solid;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.c-typeahead__dropdown li {
+    cursor: pointer;
+    padding: 2px 10px;
+}
+
+.c-typeahead__dropdown li:hover,
+.c-typeahead__dropdown li.is-selected,
+.c-typeahead__dropdown li:focus {
+    background-color: pink;
+    outline: none;
+}
diff --git a/demo/typeahead.html b/demo/typeahead.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Vanilla UI - Typeahead</title>
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+
+    <div class="main-content">
+        <h1>Vanilla UI—Typeahead</h1>
+
+        <div class="js-typeahead">
+            <label for="typer">No. of players</label>
+            <select id="typer" name="hadouken">
+                <option value="" disabled selected>Please Select</option>
+                <option value="1">One</option>
+                <option value="2">Two</option>
+                <option value="3">Three</option>
+                <option value="4">Four</option>
+            </select>
+        </div>
+
+    </div>
+    <script src="../lib/vanilla-ui.js"></script>
+</body>
+</html>
diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
@@ -120,7 +120,7 @@ const UIDialog = ({
     /**
      * @function openDialog
      * @desc sets up dialog and state ready to be shown
-     * @param {node} dialog
+     * @param {Event} e
      */
     function openDialog(e) {
         // Get trigger button so focus can be returned to it later

diff --git a/src/components/dialog/index.js b/src/components/dialog/index.js
@@ -0,0 +1,3 @@
+import dialog from './dialog';
+
+export default dialog;
diff --git a/src/components/typeahead/index.js b/src/components/typeahead/index.js
@@ -0,0 +1,3 @@
+import typeahead from './typeahead';
+
+export default typeahead;
diff --git a/src/components/typeahead/readme.md b/src/components/typeahead/readme.md
@@ -0,0 +1,27 @@
+# Vanilla UI - Typeahead / Autocomplete
+
+A widget that…
+
+## Accessibility
+
+The component has been created in accordance with the WAI ARIA guidelines for typeahead dialogs which can be found here in full: <https://www.w3.org/TR/wai-aria-practices-1.1/#autocomplete>.
+
+In summary the following approach has been applied:
+
+***
+
+## TODO
+
+* Add all ARIA.
+* Disable vertical scroll on the `<body>`?
+* Only 1 to be open at a time?
+
+***
+
+## CSS Fallbacks
+
+***
+
+## Users without Javascript
+
+***
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import dialog from './dialog';

		export default dialog;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import typeahead from './typeahead';

		export default typeahead;