Add a button with a dropdown menu arrow

<primary-action-btn> is the purely visual component which
provides a button with a dropdown arrow menu that will open
an associated dropdown menu.

An additional component or controller will then wrap this
and provide the actual Save functionality.

Card 89

h/static/scripts/app.coffee

@@ -147,6 +147,7 @@ module.exports = angular.module('h', [
 .directive('tabReveal', require('./directive/tab-reveal'))
 .directive('shareDialog', require('./directive/share-dialog'))
 .directive('windowScroll', require('./directive/window-scroll'))
+.directive('primaryActionBtn', require('./directive/primary-action-btn'))
 
 .filter('converter', require('./filter/converter'))
 .filter('moment', require('./filter/moment'))

h/static/scripts/directive/primary-action-btn.js

+'use strict';
+
+// @ngInject
+function PrimaryActionBtnController($scope, $timeout) {
+  this.toggleDropdown = function($event) {
+    $event.stopPropagation();
+    $timeout(function () {
+      $scope.onToggleDropdown();
+    }, 0);
+  }
+}
+
+module.exports = function () {
+  return {
+    controller: PrimaryActionBtnController,
+    controllerAs: 'vm',
+    restrict: 'E',
+    scope: {
+      label: '=',
+      dropdownMenuLabel: '@',
+      onToggleDropdown: '&',
+    },
+    templateUrl: 'primary_action_btn.html'
+  };
+};

h/static/styles/app.scss

@@ -6,6 +6,8 @@ $base-line-height: 20px;
 @import 'reset';
 @import 'common';
 
+// components
+@import 'primary-action-btn';
 
 body {
   @extend .noise;

h/static/styles/primary-action-btn.scss

+// the primary action button for a form
+.primary-action-btn {
+  $default-background-color: #626262;
+  $hover-background-color: #3A3A3A;
+  $h-padding: 9px;
+  $height: 35px;
+  $border-radius: 2px;
+  $arrow-indicator-width: 26px;
+
+  background-color: $default-background-color;
+
+  border: 0px;
+  border-radius: $border-radius;
+
+  color: #F1F1F1;
+  font-size: $body1-font-size;
+  font-weight: bold;
+  height: $height;
+  position: relative;
+
+  user-select: none;
+
+  &__label {
+    // the label occupies the entire space of the button and
+    // shows a darker state on hover
+    background-color: transparent;
+    border-radius: $border-radius;
+    line-height: $height;
+    padding-left: $h-padding;
+    padding-right: $arrow-indicator-width + 8px;
+    height: 100%;
+    vertical-align: middle;
+
+    &:hover {
+      background-color: $hover-background-color;
+    }
+
+    &:disabled {
+      color: #929292;
+    }
+  }
+
+  // dropdown arrow which reveals the button's associated menu
+  // when clicked
+  &__dropdown-arrow {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+
+    height: 100%;
+    width: $arrow-indicator-width;
+    padding-right: $h-padding;
+    margin-left: 8px;
+
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+
+    // 1px vertical separator between label and dropdown arrow
+    &-separator {
+      position: absolute;
+      top: 0px;
+      bottom: 0px;
+      margin-top: auto;
+      margin-bottom: auto;
+
+      width: 1px;
+      height: 15px;
+      background-color: #818181;
+    }
+
+    // the ▼ arrow which reveals the dropdown menu when clicked
+    &-indicator {
+      position: absolute;
+      left: 0px;
+      right: 0px;
+      top: 0px;
+      bottom: 0px;
+      line-height: $height;
+      text-align: center;
+
+      &:hover {
+        background-color: #3A3A3A;
+        border-top-right-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+
+      & > div {
+        transform: scaleY(0.7);
+      }
+    }
+  }
+}

h/templates/client/primary_action_btn.html

+<!--
+  Uses a <div> rather than a <button> so that hover states for child elements work
+  in Firefox. See https://bugzilla.mozilla.org/show_bug.cgi?id=843003
+!-->
+<div aria-role="button" class="primary-action-btn">
+  <div class="primary-action-btn__label" ng-bind="label"></div>
+  <div
+    class="primary-action-btn__dropdown-arrow"
+    title="{{dropdownMenuLabel}}"
+    ng-click="vm.toggleDropdown($event)">
+    <div class="primary-action-btn__dropdown-arrow-separator"></div>
+    <div class="primary-action-btn__dropdown-arrow-indicator">
+      <div>▼</div>
+    </div>
+  </div>
+</div>