From 2102e007ed72058e793abc5dc8cbc9feb9a539c0 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 25 Feb 2022 11:52:43 -0500
Subject: [PATCH] Add icon prop to text input.

---
 src/assets/img/icons/location-pin.svg         |  3 ++
 .../textbox-question/textbox-question.vue     | 28 ++++++++++++++++--
 src/layouts/component-test/component-test.vue | 29 +++++++++++++++++--
 3 files changed, 55 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/img/icons/location-pin.svg

diff --git a/src/assets/img/icons/location-pin.svg b/src/assets/img/icons/location-pin.svg
new file mode 100644
index 000000000..e84330374
--- /dev/null
+++ b/src/assets/img/icons/location-pin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.8 16" xml:space="preserve">
+  <path d="M6.4 0c-.85 0-1.69.18-2.47.52-.78.34-1.49.84-2.07 1.47A7.026 7.026 0 0 0 0 6.75c0 1.77.67 3.48 1.86 4.77l4.02 4.26c.07.07.15.13.23.16.1.04.19.06.29.06.1 0 .19-.02.28-.06.09-.04.17-.09.23-.16l4.02-4.26a6.884 6.884 0 0 0 1.87-4.77c.01-1.78-.66-3.49-1.87-4.77A6.166 6.166 0 0 0 8.86.51C8.09.18 7.25 0 6.4 0zm0 9.13c-.47 0-.93-.14-1.32-.41-.39-.27-.7-.64-.88-1.09-.19-.44-.23-.93-.14-1.4.09-.47.32-.9.65-1.24.33-.34.76-.57 1.22-.66.46-.09.94-.05 1.38.14.44.18.81.49 1.07.89s.4.87.4 1.35c0 .64-.25 1.26-.7 1.71-.44.46-1.05.71-1.68.71z" fill="#8e9292"/>
+</svg>
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 9df4c19e7..5daaa9bd4 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="textbox-question">
+  <div class="textbox-question" :class="hasError ? 'has-error' : ''">
     <label :for="inputId" class="form-label">{{labelText}}</label>
-    <input type="text" class="form-control" :id="inputId" :placeholder="placeholderText" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
-    <p class="mt-1 mb-0">There has been an error!</p>
+    <input type="text" class="form-control" :id="inputId" :placeholder="placeholderText" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired" :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']">
+    <p class="mt-2 form-test-error" v-if="!suppressError">
+      There has been an error!
+    </p>
   </div>
 </template>
 
@@ -16,12 +18,29 @@ export default {
     placeholderText: String,
     inputId: String,
     isRequired: Boolean,
+    hasIcon: Boolean,// If input has an icon
+    iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used
+    iconURL: String,
+    hasError: Boolean,
   }
 };
 </script>
 
 <style lang="scss">
 .textbox-question {
+  input {
+    &.has-icon {
+      background-image: url(~@/assets/img/icons/location-pin.svg);
+      background-repeat: no-repeat;
+      background-position: .75rem 50%;
+      background-size: 1rem auto;
+      padding: 0 0.75rem 0 2.5rem;
+      &.icon-right {
+        background-position: calc(100% - .75rem) 50%;
+        padding: 0 2.5rem 0 0.75rem
+      }
+    }
+  }
   .form-label {
     margin-bottom: .25rem;
   }
@@ -48,5 +67,8 @@ export default {
       box-shadow: 0 0 0 4px $blue-300;
     }
   }
+  p {
+    display: none;
+  }
 }
 </style>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index d75266010..c4d45822f 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -27,12 +27,37 @@
       </div>
       <div class="row">
         <div class="col">
-          <h6 class="my-4">With Error (class="has-error"):</h6>
+          <h6 class="my-4">With icon aligned left</h6>
+          <textboxQuestion
+            labelText="Text Input Label"
+            placeholderText="Disabled"
+            inputID="test-text-input"
+            hasIcon
+            imgUrl="~@/assets/img/icons/spinner.svg"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">With icon aligned right</h6>
+          <textboxQuestion
+            labelText="Text Input Label"
+            placeholderText="Disabled"
+            inputID="test-text-input"
+            hasIcon
+            iconRight
+            imgUrl="~@/assets/img/icons/spinner.svg"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">With Error</h6>
           <textboxQuestion
             labelText="Text Input Label"
             placeholderText="Placeholder"
             inputID="test-text-input"
-            class="has-error"
+            hasError
           />
         </div>
       </div>