From 2bea369ab4b562caddc67f02a709b64aef1f0cd6 Mon Sep 17 00:00:00 2001
From: Rob Levin <roblevintennis@gmail.com>
Date: Sun, 11 Oct 2020 16:44:39 -0700
Subject: [PATCH] Input addons uses svg icons. Fixes missing newline

---
 agnosticui-vue/src/stories/Input.stories.js |  2 +-
 showcase/src/partials/Inputs.vue            | 56 +++++++++++++++++----
 2 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/agnosticui-vue/src/stories/Input.stories.js b/agnosticui-vue/src/stories/Input.stories.js
index 6be2e0b88..e1b85aa1a 100644
--- a/agnosticui-vue/src/stories/Input.stories.js
+++ b/agnosticui-vue/src/stories/Input.stories.js
@@ -276,4 +276,4 @@ export const Email = () => ({
   methods: {
     onEnter: (ev) => { console.log(ev) },
   },
-});
\ No newline at end of file
+});
diff --git a/showcase/src/partials/Inputs.vue b/showcase/src/partials/Inputs.vue
index 82d673e4c..ad61838d6 100644
--- a/showcase/src/partials/Inputs.vue
+++ b/showcase/src/partials/Inputs.vue
@@ -256,16 +256,38 @@
               uniqueId="inputWithAddons"
               label="Input with addons"
             >
-              <template v-slot:addonLeft
-                ><InputAddonItem addonLeft
-                  ><span>L</span></InputAddonItem
-                ></template
-              >
-              <template v-slot:addonRight
-                ><InputAddonItem addonRight
-                  ><span>R</span></InputAddonItem
-                ></template
-              >
+              <template v-slot:addonLeft>
+                <InputAddonItem addonLeft>
+                  <svg
+                    role="img"
+                    class="input-addon-left demo-icon-check"
+                    viewBox="0 0 16 16"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <desc>Cross icon</desc>
+                    <path
+                      d="M14 2.5l-8.5 8.5-3.5-3.5-1.5 1.5 5 5 10-10z"
+                    ></path>
+                  </svg>
+                </InputAddonItem>
+              </template>
+              <template v-slot:addonRight>
+                <InputAddonItem addonRight>
+                  <svg
+                    role="img"
+                    class="input-addon-left demo-icon-cross"
+                    viewBox="0 0 16 16"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <desc>Checkmark icon</desc>
+                    <path
+                      d="M13.957 3.457l-1.414-1.414-4.543 4.543-4.543-4.543-1.414 1.414 4.543 4.543-4.543 4.543 1.414 1.414 4.543-4.543 4.543 4.543 1.414-1.414-4.543-4.543z"
+                    ></path>
+                  </svg>
+                </InputAddonItem>
+              </template>
             </AgInput>
           </p>
         </FlexCol>
@@ -336,4 +358,18 @@ export default {
 .flex > div {
   margin-bottom: var(--Space-16);
 }
+
+.demo-icon-cross,
+.demo-icon-check {
+  width: 14px;
+  height: 14px;
+}
+
+.demo-icon-cross {
+  fill: tomato;
+}
+
+.demo-icon-check {
+  fill: lightseagreen;
+}
 </style>