From 49a767d43ee5aa010f08e8635771c00514c60507 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Thu, 14 Nov 2024 15:21:51 +0000
Subject: [PATCH] feat: include example for icon insert on input fields

---
 src/core/Icon/__snapshots__/Icon.stories.tsx.snap |  4 ++--
 src/core/styles/Forms.stories.tsx                 | 14 ++++++++++++++
 .../styles/__snapshots__/Forms.stories.tsx.snap   | 15 +++++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
index c68200073..1d052720a 100644
--- a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
+++ b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
@@ -447,14 +447,14 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
   </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-display-connection-state-&amp;-recovery
+      icon-display-connection-state-recovery
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
         <svg class="text-cool-black hover:text-active-orange"
              style="width: 1.5rem; height: 1.5rem;"
         >
-          <use xlink:href="#sprite-icon-display-connection-state-&amp;-recovery">
+          <use xlink:href="#sprite-icon-display-connection-state-recovery">
           </use>
         </svg>
       </div>
diff --git a/src/core/styles/Forms.stories.tsx b/src/core/styles/Forms.stories.tsx
index ff3bbd488..aec5ce519 100644
--- a/src/core/styles/Forms.stories.tsx
+++ b/src/core/styles/Forms.stories.tsx
@@ -80,6 +80,20 @@ export const Inputs = {
         />
         <p className="ui-text-p3 text-gui-error-red mt-8">Oof, what an input</p>
       </div>
+      <div>
+        <p className="mb-16 text-neutral-800">With character insert</p>
+        <div className="relative">
+          <div className="h-32 w-32 absolute left-8 top-8 flex items-center justify-center">
+            $
+          </div>
+          <input
+            type="search"
+            className="ui-input pl-40"
+            placeholder="With icon"
+            autoComplete="off"
+          />
+        </div>
+      </div>
     </div>
   ),
 };
diff --git a/src/core/styles/__snapshots__/Forms.stories.tsx.snap b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
index 7303c8cd0..a5ad4e6d8 100644
--- a/src/core/styles/__snapshots__/Forms.stories.tsx.snap
+++ b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
@@ -255,6 +255,21 @@ exports[`CSS/Forms Inputs smoke-test 1`] = `
       Oof, what an input
     </p>
   </div>
+  <div>
+    <p class="mb-16 text-neutral-800">
+      With character insert
+    </p>
+    <div class="relative">
+      <div class="h-32 w-32 absolute left-8 top-8 flex items-center justify-center">
+        $
+      </div>
+      <input type="search"
+             class="ui-input pl-40"
+             placeholder="With icon"
+             autocomplete="off"
+      >
+    </div>
+  </div>
 </div>
 `;