From 303f410413a582e58d1905a6dab6d1ff583d6aee Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Wed, 30 Sep 2020 09:05:27 -0500
Subject: [PATCH] feat(text-input): add fluid text input story

---
 src/TextInput/TextInput.Story.svelte | 15 +++++++++++++++
 src/TextInput/TextInput.stories.js   | 27 +++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/src/TextInput/TextInput.Story.svelte b/src/TextInput/TextInput.Story.svelte
index 2e6d82de..954650be 100644
--- a/src/TextInput/TextInput.Story.svelte
+++ b/src/TextInput/TextInput.Story.svelte
@@ -1,6 +1,7 @@
 <script>
   export let story = undefined;
 
+  import { FluidForm } from "../FluidForm";
   import PasswordInput from "./PasswordInput.svelte";
   import TextInput from "./TextInput.svelte";
   import TextInputSkeleton from "./TextInput.Skeleton.svelte";
@@ -54,6 +55,20 @@
       Hide password
     </button>
   </div>
+{:else if story === 'fluid'}
+  <FluidForm>
+    <TextInput
+      bind:ref
+      {...$$props}
+      bind:value
+      on:keydown="{(e) => {
+        console.log('on:keydown', e);
+      }}"
+      on:change="{() => {
+        console.log('change');
+      }}"
+    />
+  </FluidForm>
 {:else}
   <TextInput
     bind:ref
diff --git a/src/TextInput/TextInput.stories.js b/src/TextInput/TextInput.stories.js
index e5deb6a6..c5f28d34 100644
--- a/src/TextInput/TextInput.stories.js
+++ b/src/TextInput/TextInput.stories.js
@@ -35,6 +35,33 @@ export const Default = () => ({
   },
 });
 
+export const Fluid = () => ({
+  Component,
+  props: {
+    story: 'fluid',
+    size: select("Field size (size)", sizes, undefined) || undefined,
+    disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
+    hideLabel: boolean("No label (hideLabel)", false),
+    labelText: text("Label text (labelText)", "Text Input label"),
+    helperText: text("Helper text (helperText)", "Optional helper text here"),
+    invalid: boolean("Show form validation UI (invalid)", false),
+    invalidText: text(
+      "Content of form validation UI (invalidText)",
+      "A valid value is required"
+    ),
+    warn: boolean("Show warning state (warn)", false),
+    warnText: text(
+      "Warning state text (warnText)",
+      "This will overwrite your current settings"
+    ),
+    placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
+    inline: boolean("Inline variant (inline)", false),
+    id: text("TextInput id", "text-input-id"),
+    name: text("TextInput name", "text-input-name"),
+  },
+});
+
 export const TogglePasswordVisibility = () => ({
   Component,
   props: {