@getmicdrop/svelte-components 5.20.2 → 5.21.0

package/dist/primitives/Input/Input.stories.svelte

@@ -1,139 +1,139 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import Input from "./Input.svelte";
-  
-  import ShareIcon from "../../assets/svg/share-08.svg";
-  import Pin from "./../../assets/icons/tick-01.png";
-
-  const { Story } = defineMeta({
-    title: "Components/Input",
-    component: Input,
-    argTypes: {
-      type: { control: "text" },
-      label: { control: "text" },
-      placeholder: { control: "text" },
-      className: { control: "text" },
-      id: { control: "text" },
-      name: { control: "text" },
-      maxlength: { control: "number" },
-      minlength: { control: "number" },
-      required: { control: "boolean" },
-      disabled: { control: "boolean" },
-      optional: { control: "boolean" },
-      errorText: { control: "text" },
-    },
-  });
-
-  const handleInput = (event) => {
-    const value = event.target.value;
-    console.log(value);
-  };
-
-</script>
-
-
-<Story
-  name="Email Input"
-  args={{
-    type: "email",
-    label: "Email",
-    placeholder: "Enter your email",
-    errorText: "Please enter a valid email",
-    size: "full",
-  }}
-/>
-
-<Story
-  name="Text Input"
-  args={{
-    type: "text",
-    label: "Full Name",
-    placeholder: "Enter your full name",
-    size: "full",
-  }}
-/>
-
-<Story name="Text Area">
-  <Input
-    type="textarea"
-    id="texarea"
-    name="textarea"
-    label="Text Area"
-    placeholder="Write a text here"
-  />
-</Story>
-
-<Story
-  name="Password"
-  args={{
-    type: "password",
-    label: "Password",
-    placeholder: "Enter password",
-    size: "full",
-    required: true,
-    helperText: "Password must be at least 8 characters",
-  }}
-/>
-
-<Story
-  name="Input with Helper Text"
-  args={{
-    type: "text",
-    label: "Address",
-    placeholder: "Enter address",
-    size: "full",
-    helperText: "Include street, city, and zip code.",
-  }}
-/>
-
-<Story
-  name="Input with Icon"
-  args={{
-    type: "text",
-    label: "Input with Icon",
-    placeholder: "Input with Icon",
-    size: "full",
-    icon: Pin,
-  }}
-/>
-
-<Story
-  name="Credit Card"
-  args={{
-    type: "creditCardNumber",
-    label: "Card Number",
-    placeholder: "1234 5678 9012 3456",
-    size: "full",
-    required: true,
-    maxlength: 19,
-    minlength: 19,
-    errorText: "Please enter a valid card number",
-  }}
-/>
-
-<Story
-  name="Phone Number"
-  args={{
-    type: "phoneNumber",
-    label: "Phone Number",
-    placeholder: "xxx-xxx-xxxx",
-    size: "full",
-    required: true,
-    maxlength: 12,
-    minlength: 10,
-    errorText: "Please enter a valid phone number",
-  }}
-/>
-
-<Story
-  name="Input with Error State"
-  args={{
-    type: "text",
-    label: "Required Field",
-    placeholder: "This field is required",
-    size: "full",
-    required: true,
-    errorText: "This field is required",
-  }}
-/>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import Input from "./Input.svelte";
+  
+  import ShareIcon from "../../assets/svg/share-08.svg";
+  import Pin from "./../../assets/icons/tick-01.png";
+
+  const { Story } = defineMeta({
+    title: "Components/Input",
+    component: Input,
+    argTypes: {
+      type: { control: "text" },
+      label: { control: "text" },
+      placeholder: { control: "text" },
+      className: { control: "text" },
+      id: { control: "text" },
+      name: { control: "text" },
+      maxlength: { control: "number" },
+      minlength: { control: "number" },
+      required: { control: "boolean" },
+      disabled: { control: "boolean" },
+      optional: { control: "boolean" },
+      errorText: { control: "text" },
+    },
+  });
+
+  const handleInput = (event) => {
+    const value = event.target.value;
+    console.log(value);
+  };
+
+</script>
+
+
+<Story
+  name="Email Input"
+  args={{
+    type: "email",
+    label: "Email",
+    placeholder: "Enter your email",
+    errorText: "Please enter a valid email",
+    size: "full",
+  }}
+/>
+
+<Story
+  name="Text Input"
+  args={{
+    type: "text",
+    label: "Full Name",
+    placeholder: "Enter your full name",
+    size: "full",
+  }}
+/>
+
+<Story name="Text Area">
+  <Input
+    type="textarea"
+    id="texarea"
+    name="textarea"
+    label="Text Area"
+    placeholder="Write a text here"
+  />
+</Story>
+
+<Story
+  name="Password"
+  args={{
+    type: "password",
+    label: "Password",
+    placeholder: "Enter password",
+    size: "full",
+    required: true,
+    helperText: "Password must be at least 8 characters",
+  }}
+/>
+
+<Story
+  name="Input with Helper Text"
+  args={{
+    type: "text",
+    label: "Address",
+    placeholder: "Enter address",
+    size: "full",
+    helperText: "Include street, city, and zip code.",
+  }}
+/>
+
+<Story
+  name="Input with Icon"
+  args={{
+    type: "text",
+    label: "Input with Icon",
+    placeholder: "Input with Icon",
+    size: "full",
+    icon: Pin,
+  }}
+/>
+
+<Story
+  name="Credit Card"
+  args={{
+    type: "creditCardNumber",
+    label: "Card Number",
+    placeholder: "1234 5678 9012 3456",
+    size: "full",
+    required: true,
+    maxlength: 19,
+    minlength: 19,
+    errorText: "Please enter a valid card number",
+  }}
+/>
+
+<Story
+  name="Phone Number"
+  args={{
+    type: "phoneNumber",
+    label: "Phone Number",
+    placeholder: "xxx-xxx-xxxx",
+    size: "full",
+    required: true,
+    maxlength: 12,
+    minlength: 10,
+    errorText: "Please enter a valid phone number",
+  }}
+/>
+
+<Story
+  name="Input with Error State"
+  args={{
+    type: "text",
+    label: "Required Field",
+    placeholder: "This field is required",
+    size: "full",
+    required: true,
+    errorText: "This field is required",
+  }}
+/>