From 39cd8e703b1e402389c76cb7deea551923ea4852 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 6 Apr 2018 11:40:26 +0200
Subject: [PATCH] make dropdowns open on click by default, hover modifier

---
 .../_assets/javascripts/bigchain/dropdowns.js |  4 +--
 _src/_assets/styles/bigchain/_dropdowns.scss  |  4 +--
 _src/styleguide.md                            | 27 ++++++++++++++++++-
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/_src/_assets/javascripts/bigchain/dropdowns.js b/_src/_assets/javascripts/bigchain/dropdowns.js
index 0070fd0..1724a8e 100644
--- a/_src/_assets/javascripts/bigchain/dropdowns.js
+++ b/_src/_assets/javascripts/bigchain/dropdowns.js
@@ -2,8 +2,8 @@
 //=include bootstrap/js/dist/util.js
 //=include bootstrap/js/dist/dropdown.js
 
-$('body').on('mouseenter mouseleave', '.dropdown', function(e) {
-    var _d = $(e.target).closest('.dropdown')
+$('body').on('mouseenter mouseleave', '.dropdown--hover', function(e) {
+    var _d = $(e.target).closest('.dropdown--hover')
 
     _d.addClass('show')
 
diff --git a/_src/_assets/styles/bigchain/_dropdowns.scss b/_src/_assets/styles/bigchain/_dropdowns.scss
index 4919776..5ac7003 100644
--- a/_src/_assets/styles/bigchain/_dropdowns.scss
+++ b/_src/_assets/styles/bigchain/_dropdowns.scss
@@ -84,12 +84,12 @@
 }
 
 .dropdown-menu.show,
-.dropdown:hover > .dropdown-menu {
+.dropdown--hover:hover > .dropdown-menu {
     transform: scale(1, 1);
     opacity: 1;
 }
 
-.dropdown > .dropdown-toggle:active {
+.dropdown--hover > .dropdown-toggle:active {
     // Without this, clicking will make it sticky
     pointer-events: none;
 }
diff --git a/_src/styleguide.md b/_src/styleguide.md
index 6a80d74..04f0cab 100644
--- a/_src/styleguide.md
+++ b/_src/styleguide.md
@@ -313,7 +313,7 @@ Logo can be used with a base class and modifier classes for size & color:
 
 <div class="dropdown">
   <a class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    Hover me
+    Click me
   </a>
   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
     <a class="dropdown-item" href="#">Action</a>
@@ -335,3 +335,28 @@ Logo can be used with a base class and modifier classes for size & color:
   </div>
 </div>
 ```
+
+<div class="dropdown dropdown--hover">
+  <a class="dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Hover me
+  </a>
+  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+  </div>
+</div>
+<br />
+
+```html
+<div class="dropdown dropdown--hover">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Dropdown button
+  </button>
+  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+  </div>
+</div>
+```