feat(forms): add link updater

This functionality allows for us to create an input that updates a
link/piece of text/etc.

[Finishes #119563151]

package.json

@@ -178,6 +178,7 @@
     "express": "^4.13.4",
     "git-create-deploy-branch": "^1.0.1",
     "lodash": "^2.4.2",
+    "npm-user-validate": "^0.1.2",
     "prismjs": "0.0.1",
     "pui-prismjs": "0.0.1",
     "pui-react-animation": "^0.0.7"

src/pivotal-ui/components/forms/forms.scss

@@ -1408,7 +1408,7 @@ An input for an npm scope, prompting the user with an @ sign.
 /*pending
 ---
 title: Focus Inputs
-name: form_focus_input
+name: fo:rm_focus_input
 categories:
   - Forms
   - All
@@ -1426,3 +1426,39 @@ Add the focus-input directive to an element that should be focused if the focus-
 ```
 */
 
+
+/*doc
+---
+title: Link updater input
+name: form_input_link_update
+parent: 00_form_introduction
+categories:
+ - css_components_forms
+ - css_all
+---
+
+The link updater input updates a link underneath the input with the information that is inside of the input
+
+```html_example
+<form role="form">
+  <div class="form-group">
+    <label for="username">Username</label>
+    <div class="link-updater">
+      <input name="username" id="username" class="form-control">
+      <p class="mtl">https://www.npmjs.com/~<strong>username</strong></p>
+    </div>
+  </div>
+</form>
+```
+*/
+
+.link-updater {
+  .error {
+    color: $npm-brand;
+    font-size: .9em;
+  }
+
+  p {
+    color: $form-label-color;
+  }
+}

src/pivotal-ui/components/forms/index.js

@@ -1 +1,2 @@
 exports.stepper = require('./stepper');
+exports.linkUpdater = require('./link-updater');

src/pivotal-ui/components/forms/link-updater.js

@@ -0,0 +1,59 @@
+var $ = require('jquery');
+var isInvalid = require('npm-user-validate').username;
+
+var LinkUpdater = function(el){
+  this.el = $(el);
+  this.input = this.el.find("input");
+  this.pathDisplay = this.el.find("p strong");
+  this.currentValue = "";
+};
+
+LinkUpdater.prototype.updateValue = function(inputValue){
+  var pathVal = inputValue;
+  if(inputValue === ""){
+    pathVal = "username";
+  }
+  this.currentValue = inputValue;
+  this.pathDisplay.text(pathVal);
+};
+
+LinkUpdater.prototype.showError = function(msg){
+  var err = this.el.find(".error");
+
+  if(!err.length) {
+    err = $("<span />")
+    .addClass("error")
+    .text(msg);
+
+    this.el.append(err);
+  } else {
+    err.text(msg);
+  }
+
+};
+
+LinkUpdater.prototype.hideError = function(){
+  this.el.find(".error").remove();
+};
+
+$(function(){
+  var linkUpdater = $(".link-updater");
+
+  $.each(linkUpdater, function(idx, el){
+    var lu = new LinkUpdater(el);
+
+    lu.input.on("input", function(e){
+      var err = isInvalid(e.target.value);
+      if(err) {
+        e.target.value = lu.currentValue;
+        lu.showError(err.message);
+      } else {
+        lu.hideError();
+        lu.updateValue(e.target.value);
+      }
+    });
+
+  });
+});
+
+module.exports = LinkUpdater;

src/pivotal-ui/components/forms/package.json

@@ -2,7 +2,8 @@
   "homepage": "http://styleguide.pivotal.io/forms.html",
   "main": "index.js",
   "dependencies": {
-    "@npmcorp/pui-css-bootstrap": "^2.0.0"
+    "@npmcorp/pui-css-bootstrap": "^2.0.0",
+    "npm-user-validate": "^0.1.2"
   },
-  "version": "3.0.7"
+  "version": "3.1.0"
 }