From 41f9392a933933be09aafca1e71d8202a9b3fa35 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Fri, 21 Jul 2017 11:44:49 +0200
Subject: [PATCH] Add dropdown description

---
 docs/css/bulma-docs.css                     |  4 +-
 docs/documentation/components/dropdown.html | 74 ++++++++++++++++++++-
 sass/components/dropdown.sass               |  4 +-
 3 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 566f3591..298efb3d 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -3778,11 +3778,11 @@ input[type="submit"].button {
   vertical-align: top;
 }
 
-.dropdown.is-active .dropdown-container, .dropdown.is-hoverable:hover .dropdown-container {
+.dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu {
   display: block;
 }
 
-.dropdown-container {
+.dropdown-menu {
   display: none;
   left: 0;
   max-width: 20rem;
diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html
index 854a3a08..11a544b0 100644
--- a/docs/documentation/components/dropdown.html
+++ b/docs/documentation/components/dropdown.html
@@ -5,6 +5,33 @@ doc-subtab: dropdown
 ---
 
 {% capture dropdown_example %}
+<div class="dropdown">
+  <div class="dropdown-trigger">
+    <a class="button">
+      <span>Dropdown button</span>
+      <span class="icon is-small">
+        <i class="fa fa-angle-down"></i>
+      </span>
+    </a>
+  </div>
+  <div class="dropdown-menu">
+    <div class="dropdown-content">
+      <a class="dropdown-item">
+        Dropdown item
+      </a>
+      <a class="dropdown-item">
+        Other dropdown item
+      </a>
+      <hr class="dropdown-divider">
+      <a class="dropdown-item">
+        With a divider
+      </a>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture dropdown_click_example %}
 <div class="dropdown">
   <div class="dropdown-trigger">
     <a class="button is-primary">
@@ -14,7 +41,7 @@ doc-subtab: dropdown
       </span>
     </a>
   </div>
-  <div class="dropdown-container">
+  <div class="dropdown-menu">
     <div class="dropdown-content">
       <a class="dropdown-item">
         Overview
@@ -56,7 +83,7 @@ doc-subtab: dropdown
       </span>
     </a>
   </div>
-  <div class="dropdown-container">
+  <div class="dropdown-menu">
     <div class="dropdown-content">
       <div class="dropdown-item">
         <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
@@ -89,7 +116,48 @@ doc-subtab: dropdown
 
     <hr>
 
-    {{dropdown_example}}
+    <div class="content">
+      <p>
+        The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu.
+      </p>
+      <ul>
+        <li>
+          <code>dropdown</code> the <strong>main</strong> container
+          <ul>
+            <li>
+              <code>dropdown-trigger</code> the container for a <code>button</code>
+            </li>
+            <li>
+              <code>dropdown-menu</code> the toggable menu, <strong>hidden</strong> by default
+              <ul>
+                <li>
+                  <code>dropdown-content</code> the dropdown <strong>box</strong>, with a white background and a shadow
+                  <ul>
+                    <li>
+                      <code>dropdown-item</code> each <strong>single item</strong> of the dropdown, which can either be a <code>a</code> or a <code>div</code>
+                    </li>
+                    <li>
+                      <code>dropdown-divider</code> a <strong>horizontal line</strong> to separate dropdown items
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{dropdown_example}}
+      </div>
+      <div class="column is-half highlight-full">
+        {% highlight html %}{{dropdown_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    {{dropdown_click_example}}
     {{dropdown_info_example}}
   </div>
 </section>
diff --git a/sass/components/dropdown.sass b/sass/components/dropdown.sass
index c12cb3f9..0f919eb9 100644
--- a/sass/components/dropdown.sass
+++ b/sass/components/dropdown.sass
@@ -19,10 +19,10 @@ $dropdown-divider-background: $border !default
   vertical-align: top
   &.is-active,
   &.is-hoverable:hover
-    .dropdown-container
+    .dropdown-menu
       display: block
 
-.dropdown-container
+.dropdown-menu
   display: none
   left: 0
   max-width: 20rem