feat(dropdown): Add dropdown dropup button molecule

docs/demo/assets/fabricator/scripts/fabricator.js

@@ -1,6 +1,7 @@
 'use strict';
 
 require('./prism');
+require('./interactions');
 
 /**
  * Global `fabricator` object

docs/demo/assets/fabricator/scripts/interactions.js

@@ -0,0 +1,11 @@
+// /* Demo Dropdowns and Dropups (button-dropdown.html) */
+$(document).ready(function() {
+    $("#dropdownExample").click(function(e){
+        e.preventDefault();
+        $("#dropdownExampleList").toggle();
+    });
+    $("#dropupExample").click(function(e){
+        e.preventDefault();
+        $("#dropupExampleList").toggle();
+    });
+});

docs/demo/materials/molecules/button-dropdown.html

@@ -0,0 +1,30 @@
+---
+name: button group
+title: button group
+notes: |
+  Wrap buttons and a list with `dc-btn-dropdown` to make dropdown that come from buttons.
+---
+<div class="dc-btn-dropdown">
+  <button class="dc-btn dc-btn--primary" id="dropdownExample">
+      Dropdown
+      <span class="dc-arrow-down"></span>
+</button>
+<ul class="dc-dropdown-list" id="dropdownExampleList">
+    <li><a href="#">The first option</a></li>
+    <li><a href="#">The second option</a></li>
+    <li class="disabled"><a href="#">Disabled option</a></li>
+</ul>
+</div>
+
+<div class="dc-btn-dropup">
+  <button class="dc-btn dc-btn--primary" id="dropupExample">
+      Dropup
+      <span class="dc-arrow-up"></span>
+</button>
+<ul class="dc-dropdown-list" id="dropupExampleList">
+    <li><a href="#">The first option</a></li>
+    <li><a href="#">The second option</a></li>
+    <li class="dc-divider"></li>
+    <li><a href="#">Separated option</a></li>
+</ul>
+</div>

docs/demo/views/layouts/default.html

@@ -15,7 +15,8 @@
 	<link rel="stylesheet" href="{{basePath}}/assets/toolkit/styles/toolkit.css">
 	<!-- /toolkit styles -->
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
-
+	<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 
 
     <link rel="icon" href="favicon.ico">

src/styles/modules/_btn.scss

@@ -25,6 +25,10 @@
     box-shadow: 0 1px 1px transparent;
     cursor: default;
 
+    &:focus {
+        outline: none;
+    }
+
     > * {
         margin-right: 10px;
     }

src/styles/modules/_dropdown.scss

@@ -0,0 +1,93 @@
+.dc-btn-dropdown,
+.dc-btn-dropup {
+    // FIXME: Prefer using placeholder selectors (e.g. %some-placeholder) with @extend
+    // scss-lint:disable PlaceholderInExtend
+    @extend .dc-cf;
+    // scss-lint:enable PlaceholderInExtend
+    position: relative;
+}
+
+.dc-arrow-down,
+.dc-arrow-up {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-right: 0;
+    margin-left: 4px;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    overflow: visible;
+    vertical-align: middle;
+}
+
+.dc-arrow-down {
+    border-top: 5px dashed;
+}
+
+.dc-arrow-up {
+    border-bottom: 5px dashed;
+}
+
+
+.dc-dropdown-list {
+    display: none;
+    position: absolute;
+    padding: $dc-space50 0;
+    border-radius: $dc-radius100;
+    background-color: $dc-white;
+    box-shadow: 0 4px 8px rgba($dc-black, .2);
+    z-index: 999;
+    list-style-type: none;
+
+    .dc-divider {
+        height: 1px;
+        margin: $dc-space50 0;
+        background-color: $dc-gray60;
+        overflow: hidden;
+    }
+
+    .disabled {
+        cursor: not-allowed;
+        opacity: .5;
+
+        * {
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+    }
+
+    a {
+        display: block;
+        padding: 0 $dc-space100;
+        line-height: $dc-space200;
+        text-decoration: none;
+
+        &:hover {
+            background-color: $dc-gray70;
+        }
+
+        &:visited {
+            color: $dc-gray10;
+        }
+
+        &:active {
+            background-color: $dc-orange50;
+            color: $dc-orange20;
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .dc-btn-dropdown & {
+        top: 100%;
+        margin-top: -$dc-space75;
+    }
+
+    .dc-btn-dropup & {
+        bottom: 100%;
+        margin-bottom: $dc-space75;
+    }
+
+}

src/styles/toolkit.scss

@@ -18,3 +18,5 @@
 @import "modules/toast";
 @import "modules/loading-bar";
 @import "modules/divider";
+@import "modules/dropdown";
+