From a5d70645b4624580b4672ab2eeef23ec84a4c12d Mon Sep 17 00:00:00 2001
From: Alex S <bobylito@users.noreply.github.com>
Date: Tue, 29 May 2018 10:34:33 +0200
Subject: [PATCH] docs(dev-novel): add tabs to switch between kinds of stories
 (#2947)

---
 dev/app/index.js | 17 +++++++++++++++++
 dev/style.css    | 20 ++++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/dev/app/index.js b/dev/app/index.js
index 991f647356..5127fa2379 100644
--- a/dev/app/index.js
+++ b/dev/app/index.js
@@ -15,20 +15,37 @@ registerDisposer(() => {
 
 const q = window.location.search;
 
+let selectedTab = '';
 switch (true) {
   case q.includes('widgets=vanilla'):
     initVanillaWidgets();
+    selectedTab = 'vanilla';
     break;
   case q.includes('widgets=jquery'):
     initJqueryWidgets();
+    selectedTab = 'jquery';
     break;
   case q.includes('widgets=unmount'):
     initUnmountWidgets();
+    selectedTab = 'unmount';
     break;
   default:
     initBuiltInWidgets();
 }
 
+const selectStories = document.createElement('div');
+selectStories.className = 'story-selector';
+selectStories.innerHTML = `
+  <a href="?" class="tab ${selectedTab === '' ? 'active' : ''}">Built-in</a>
+  <a href="?widgets=jquery" class="tab ${
+    selectedTab === 'jquery' ? 'active' : ''
+  }">Connectors with jQuery</a>
+  <a href="?widgets=unmount" class="tab ${
+    selectedTab === 'unmount' ? 'active' : ''
+  }">Disposable widgets</a>
+`;
+document.body.appendChild(selectStories);
+
 start({
   projectName: 'instantsearch.js',
   projectLink: 'https://community.algolia.com/instantsearch.js/',
diff --git a/dev/style.css b/dev/style.css
index fbcb7e8b61..2cc0f4baa9 100644
--- a/dev/style.css
+++ b/dev/style.css
@@ -123,3 +123,23 @@
 .my-custom-info-box__text {
   text-align: center;
 }
+
+.story-selector {
+  padding-left: 5px;
+  background: #333;
+}
+
+.tab {
+  height: 30px;
+  display: inline-block;
+  padding: 5px;
+  margin: 5px 2px 0 2px;
+  background: #d6d6d6;
+  color: #777;
+  text-decoration: none;
+}
+
+.tab.active {
+  background: #f7f7f7;
+  color: black;
+}