From 202f3e85ab66f3b71b59922ef46f61003b1a6baf Mon Sep 17 00:00:00 2001
From: Jeffrey Lembeck <jlembeck@gmail.com>
Date: Tue, 12 Apr 2016 12:03:10 -0700
Subject: [PATCH] feat(forms): add stepper form input

This input type allows the user to add and subtract from a number input
type by pressing the buttons beside it.
---
 src/pivotal-ui/components/forms/forms.scss   | 59 +++++++++++++++++++
 src/pivotal-ui/components/forms/index.js     |  1 +
 src/pivotal-ui/components/forms/package.json |  3 +-
 src/pivotal-ui/components/forms/stepper.js   | 61 ++++++++++++++++++++
 src/pivotal-ui/javascripts/pivotal-ui.js     |  1 +
 5 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 src/pivotal-ui/components/forms/index.js
 create mode 100644 src/pivotal-ui/components/forms/stepper.js

diff --git a/src/pivotal-ui/components/forms/forms.scss b/src/pivotal-ui/components/forms/forms.scss
index 5a8ff2d15..dda882e93 100644
--- a/src/pivotal-ui/components/forms/forms.scss
+++ b/src/pivotal-ui/components/forms/forms.scss
@@ -1305,6 +1305,65 @@ A toggle switch is a horizontally styled checkbox which represents true with blu
   }
 }
 
+/*doc
+---
+title: Stepper
+name: form_stepper
+categories:
+ - css_components_forms
+ - css_all
+---
+
+A stepper is a component that increments and decrements a number in an associated
+text field by interacting with one of two buttons.
+
+
+
+```html_example
+<form class="styleguide-form form-inline" role="form">
+  <div class="form-group">
+    <label class="control-label" for="subscribers">Subscriber count</label>
+    <div class="form-stepper">
+      <button type="button" class="btn btn-default btn-decrement" title="decrement value"><span class="a11y-only">decrement value</span>&minus;</button>
+      <input class="form-control" min="1" max="99999" step="1" name="subscribers" required="" type="number" value=10>
+      <button type="button" class="btn btn-default btn-increment" title="increment value"><span class="a11y-only">increment value</span>+</button>
+    </div>
+  </div>
+</form>
+```
+
+*/
+
+.form-stepper {
+  /* omg hacks
+    this is to get rid of the native number spinner
+   */
+  input[type=number]::-webkit-inner-spin-button,
+  input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+  }
+  input[type=number] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+    width: 5em;
+    text-align: center;
+  }
+
+  input[type=number],
+  button {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  button {
+    border-radius: 4px;
+    padding: 10px 15px;
+    text-align: center;
+  }
+}
+
 /*pending
 ---
 title: Focus Inputs
diff --git a/src/pivotal-ui/components/forms/index.js b/src/pivotal-ui/components/forms/index.js
new file mode 100644
index 000000000..691429e39
--- /dev/null
+++ b/src/pivotal-ui/components/forms/index.js
@@ -0,0 +1 @@
+require('./stepper');
diff --git a/src/pivotal-ui/components/forms/package.json b/src/pivotal-ui/components/forms/package.json
index d8eb41f56..288a055de 100644
--- a/src/pivotal-ui/components/forms/package.json
+++ b/src/pivotal-ui/components/forms/package.json
@@ -1,7 +1,8 @@
 {
   "homepage": "http://styleguide.pivotal.io/forms.html",
+  "main": "index.js",
   "dependencies": {
     "@npmcorp/pui-css-bootstrap": "^2.0.0"
   },
-  "version": "2.0.1"
+  "version": "2.1.1"
 }
\ No newline at end of file
diff --git a/src/pivotal-ui/components/forms/stepper.js b/src/pivotal-ui/components/forms/stepper.js
new file mode 100644
index 000000000..daaf769df
--- /dev/null
+++ b/src/pivotal-ui/components/forms/stepper.js
@@ -0,0 +1,61 @@
+var FormStepper = function(el, input, decrementButton, incrementButton){
+  this.stepper         = $(el);
+  this.input           = input || this.stepper.find("input[type=number]");
+  this.decrementButton = decrementButton || this.stepper.find(".btn-decrement");
+  this.incrementButton = incrementButton || this.stepper.find(".btn-increment");
+
+  this.min = parseInt(this.input.attr("min")) || 0;
+  this.max = parseInt(this.input.attr("max")) || 99999;
+  this.value = parseInt(this.input.val()) || parseInt(this.min);
+};
+
+FormStepper.prototype.increment = function(){
+  var val = parseInt(this.value) || this.min;
+  this.set(val + 1);
+};
+
+FormStepper.prototype.decrement = function(){
+  var val = parseInt(this.value) || this.min;
+  this.set(val - 1);
+};
+
+FormStepper.prototype.set = function(number){
+  number = parseInt(number) || this.min;
+
+  if( number <= this.min ){
+    number = this.min;
+  } else if (number >= this.max ){
+    number = this.max;
+  }
+
+  this.value = number;
+  this.input.val(number);
+  this.stepper.trigger("FormStepper:changed", [number]);
+};
+
+FormStepper.prototype.addListeners = function(){
+  var self = this;
+
+  this.incrementButton.on("click", function(){
+    self.increment();
+  });
+
+  this.decrementButton.on("click", function(){
+    self.decrement();
+  });
+
+  this.input.on("change", function(){
+    var val = parseInt(self.input.val()) || self.min;
+    self.set(val);
+  });
+};
+
+$(function(){
+  $.each($('.form-stepper'), function(i, el) {
+    var fs = new FormStepper(el);
+    fs.addListeners();
+  });
+});
+
+
+module.exports = FormStepper;
diff --git a/src/pivotal-ui/javascripts/pivotal-ui.js b/src/pivotal-ui/javascripts/pivotal-ui.js
index 1c3c9413a..08fd8bfbb 100644
--- a/src/pivotal-ui/javascripts/pivotal-ui.js
+++ b/src/pivotal-ui/javascripts/pivotal-ui.js
@@ -7,3 +7,4 @@ require('pui-prismjs');
 require('./scale')();
 require('@npmcorp/pui-react-back-to-top/jquery-plugin');
 require('@npmcorp/pui-css-drop-down-menu');
+require('../components/forms');