From 4f7d4fa4345ed178e44f3827a7f09054ac610f50 Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Tue, 29 Sep 2020 11:07:15 -0500
Subject: [PATCH] feat(FluidForm): add FluidForm

---
 src/FluidForm/FluidForm.Story.svelte | 38 ++++++++++++++++++++++++++++
 src/FluidForm/FluidForm.stories.js   |  8 ++++++
 src/FluidForm/FluidForm.svelte       | 12 +++++++++
 src/FluidForm/index.js               |  1 +
 4 files changed, 59 insertions(+)
 create mode 100644 src/FluidForm/FluidForm.Story.svelte
 create mode 100644 src/FluidForm/FluidForm.stories.js
 create mode 100644 src/FluidForm/FluidForm.svelte
 create mode 100644 src/FluidForm/index.js

diff --git a/src/FluidForm/FluidForm.Story.svelte b/src/FluidForm/FluidForm.Story.svelte
new file mode 100644
index 00000000..b0204601
--- /dev/null
+++ b/src/FluidForm/FluidForm.Story.svelte
@@ -0,0 +1,38 @@
+<script>
+  import { PasswordInput, TextInput } from "../TextInput";
+  import FluidForm from "./FluidForm.svelte";
+
+  $: value = null;
+</script>
+
+<FluidForm
+  {...$$props}
+  on:submit="{(event) => {
+    console.log('on:submit', event);
+  }}"
+>
+  <TextInput
+    className="some-class"
+    id="test2"
+    labelText="Text Input label"
+    placeholder="Placeholder text"
+    bind:value
+    on:keydown="{(e) => {
+      console.log('on:keydown', e);
+    }}"
+    on:change="{() => {
+      console.log('change');
+    }}"
+  />
+  <PasswordInput
+    required
+    type="password"
+    id="test4"
+    labelText="Password"
+    invalid
+    invalidText="Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
+    on:keydown="{(e) => {
+      console.log('on:keydown', e);
+    }}"
+  />
+</FluidForm>
diff --git a/src/FluidForm/FluidForm.stories.js b/src/FluidForm/FluidForm.stories.js
new file mode 100644
index 00000000..9b709c55
--- /dev/null
+++ b/src/FluidForm/FluidForm.stories.js
@@ -0,0 +1,8 @@
+import { withKnobs } from "@storybook/addon-knobs";
+import Component from "./FluidForm.Story.svelte";
+
+export default { title: "FluidForm", decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+});
\ No newline at end of file
diff --git a/src/FluidForm/FluidForm.svelte b/src/FluidForm/FluidForm.svelte
new file mode 100644
index 00000000..487ca5f4
--- /dev/null
+++ b/src/FluidForm/FluidForm.svelte
@@ -0,0 +1,12 @@
+<script>
+  import { setContext } from "svelte";
+  import { Form } from "../Form";
+
+  setContext("Form", {
+    isFluid: true,
+  });
+</script>
+
+<Form class="bx--form--fluid" {...$$restProps}>
+  <slot />
+</Form>
diff --git a/src/FluidForm/index.js b/src/FluidForm/index.js
new file mode 100644
index 00000000..d6b17172
--- /dev/null
+++ b/src/FluidForm/index.js
@@ -0,0 +1 @@
+export { default as FluidForm } from './FluidForm.svelte'
\ No newline at end of file