From f48a878beb4f81ddfc06a90ac607e6f8abe5b82e Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Wed, 8 Aug 2018 10:59:14 -0400
Subject: [PATCH] Add vue stuff to sample styleguide input

---
 templates/styleguide.html | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/templates/styleguide.html b/templates/styleguide.html
index 0e263ee5..faec0a66 100644
--- a/templates/styleguide.html
+++ b/templates/styleguide.html
@@ -130,24 +130,27 @@
 
 
       <form>
-        <textinput inline-template>
-          <div class='usa-input'>
+        <textinput inline-template validation='dollars' value='1231231'>
+          <div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
             <label for='basic-text-1'>
-              Basic Text Input
+              Dollars Text Input
               <span class='usa-input__help'>
                 This is some help text to explain what this form field is and why you should fill it out.
               </span>
+              <template v-if='showError'>{{ Icon('alert') }}</template>
+              <template v-if='showValid'>{{ Icon('ok') }}</template>
             </label>
             <masked-input
               v-on:input='onInput'
               v-on:change='onChange'
+              v-model='value'
               id='basic-text-1'
               type='text'
-              placeholder='this is a sample of what you should enter'
+              ref='input'
+              placeholder='$'
+              :guide="true"
               :mask="mask">
             </masked-input>
-          <div v-if='showError'>Error</div>
-          <div v-if='showValid'>Valid</div>
           </div>
         </textinput>