@enki-tek/fms-web-components 0.0.1 → 0.0.3

package/components/textField/TextField.scss

@@ -0,0 +1,34 @@
+@import './../variable.scss';
+
+%common-font {
+    font-family: $bodyFonts;
+}
+
+:global(.custom-field) {
+    box-shadow: $mediumShadow;
+    color: $gray-500;
+    line-height: 20px;
+    display: flex;
+    padding: 16px;
+    align-items: center;
+    gap: 0.5rem;
+    align-self: stretch;
+    border-radius: 6px;
+    border: 1px solid $gray-300;
+    background: $white;
+}
+
+:global(.form-control:focus) {
+    box-shadow: none;
+    border-color: $primary;
+}
+
+:global(.custom-field::placeholder) {
+    @extend %common-font;
+    color: $gray-500;
+    text-transform: capitalize;
+}
+
+:global(input) {
+    @extend %common-font;
+}

package/components/textField/TextField.stories.d.ts

@@ -0,0 +1,85 @@
+declare namespace _default {
+    export const title: string;
+    export { TextField as component };
+    export const tags: string[];
+    export namespace argTypes {
+        namespace type {
+            namespace control {
+                const type_1: string;
+                export { type_1 as type };
+            }
+            const options: string[];
+        }
+        namespace placeholder {
+            export namespace control_1 {
+                const type_2: string;
+                export { type_2 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace value {
+            export namespace control_2 {
+                const type_3: string;
+                export { type_3 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace disabled {
+            export namespace control_3 {
+                const type_4: string;
+                export { type_4 as type };
+            }
+            export { control_3 as control };
+        }
+        namespace valid {
+            export namespace control_4 {
+                const type_5: string;
+                export { type_5 as type };
+            }
+            export { control_4 as control };
+        }
+        namespace invalid {
+            export namespace control_5 {
+                const type_6: string;
+                export { type_6 as type };
+            }
+            export { control_5 as control };
+        }
+    }
+}
+export default _default;
+export function Default({ type, placeholder, value, disabled, valid, invalid }: {
+    type: any;
+    placeholder: any;
+    value: any;
+    disabled: any;
+    valid: any;
+    invalid: any;
+}): {
+    Component: typeof TextField;
+    props: {
+        type: any;
+        placeholder: any;
+        value: any;
+        disabled: any;
+        valid: any;
+        invalid: any;
+    };
+};
+export namespace Default {
+    namespace args {
+        const type_7: string;
+        export { type_7 as type };
+        const placeholder_1: string;
+        export { placeholder_1 as placeholder };
+        const value_1: string;
+        export { value_1 as value };
+        const disabled_1: boolean;
+        export { disabled_1 as disabled };
+        const valid_1: boolean;
+        export { valid_1 as valid };
+        const invalid_1: boolean;
+        export { invalid_1 as invalid };
+    }
+}
+import TextField from "./TextField.svelte";

package/components/textField/TextField.stories.js

@@ -0,0 +1,32 @@
+import TextField from "./TextField.svelte";
+
+export default {
+    title: 'FMS/TextField',
+    component: TextField,
+    tags: ['autodocs'],
+    argTypes: {
+        type: { control: { type: 'select' },
+                options:['text','textarea','password', 'email']
+             },
+        placeholder: { control: { type: 'text' } },
+        value: { control: { type: 'text' } },
+        disabled: { control: { type: 'boolean' } },
+        valid: { control: { type: 'boolean' } },
+        invalid: { control: { type: 'boolean' } }
+    }
+};
+
+const Template = ({ type, placeholder, value, disabled, valid, invalid }) => ({
+    Component: TextField,
+    props: { type, placeholder, value, disabled, valid, invalid }
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    type: 'text',
+    placeholder: 'Enter text',
+    value: '',
+    disabled: false,
+    valid: false,
+    invalid: false
+};