@enki-tek/fms-web-components 0.0.2 → 0.0.4

package/components/Button/Button.stories.d.ts

@@ -1,48 +1,117 @@
-import Button from './Button.svelte';
+import Button from "./Button.svelte";
 declare const _default: {
     title: string;
     component: typeof Button;
     tags: string[];
-    argTypes: {
-        backgroundColor: {
-            control: string;
+};
+export default _default;
+export declare const icon: {
+    args: {
+        config: string;
+        icon: {
+            state: boolean;
+            name: string;
+            position: string;
         };
-        size: {
-            control: {
-                type: string;
-            };
-            options: string[];
+    };
+};
+export declare const rightIcon: {
+    args: {
+        icon: {
+            state: boolean;
+            name: string;
+            position: string;
         };
-        color: {
-            control: {
-                type: string;
-            };
-            options: string[];
+        config: string;
+    };
+};
+export declare const leftIcon: {
+    args: {
+        icon: {
+            state: boolean;
+            name: string;
+            position: string;
         };
+        config: string;
     };
 };
-export default _default;
-export declare const Primary: {
+export declare const secondaryBtnMedium: {
+    args: {
+        config: string;
+    };
+};
+export declare const secondaryOutlineBtnMedium: {
+    args: {
+        config: string;
+    };
+};
+export declare const secondaryBtnSmall: {
+    args: {
+        config: string;
+    };
+};
+export declare const secondaryOutlineBtnSmall: {
+    args: {
+        config: string;
+    };
+};
+export declare const secondaryBtnLarge: {
+    args: {
+        config: string;
+    };
+};
+export declare const secondaryOutlineBtnLarge: {
+    args: {
+        config: string;
+    };
+};
+export declare const infoBtnMedium: {
+    args: {
+        config: string;
+    };
+};
+export declare const infoOutlineBtnMedium: {
+    args: {
+        config: string;
+    };
+};
+export declare const dangerBtnMedium: {
+    args: {
+        config: string;
+    };
+};
+export declare const dangerOtlineBtnMedium: {
+    args: {
+        config: string;
+    };
+};
+export declare const warningBtnMedium: {
+    args: {
+        config: string;
+    };
+};
+export declare const warningOutlineBtnMedium: {
+    args: {
+        config: string;
+    };
+};
+export declare const primaryBtnMedium: {
     args: {
-        iscolor: boolean;
-        label: string;
+        config: string;
     };
 };
-export declare const Secondary: {
+export declare const primaryOutlineBtnMedium: {
     args: {
-        label: string;
-        color: string;
+        config: string;
     };
 };
-export declare const Large: {
+export declare const successBtnMedium: {
     args: {
-        size: string;
-        label: string;
+        config: string;
     };
 };
-export declare const Small: {
+export declare const successOutlineBtnMedium: {
     args: {
-        size: string;
-        label: string;
+        config: string;
     };
 };

package/components/Button/Button.stories.js

@@ -1,43 +1,104 @@
-import Button from './Button.svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+import Button from "./Button.svelte";
 export default {
     title: 'FMS/Button',
     component: Button,
     tags: ['autodocs'],
-    argTypes: {
-        backgroundColor: { control: 'color' },
-        size: {
-            control: { type: 'select' },
-            options: ['sm', 'md', 'lg'],
-        },
-        color: {
-            control: { type: 'select' },
-            options: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
-        }
-    },
-};
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary = {
-    args: {
-        iscolor: true,
-        label: 'Button',
-    },
-};
-export const Secondary = {
-    args: {
-        label: 'Button',
-        color: 'secondary'
-    },
-};
-export const Large = {
-    args: {
-        size: 'lg',
-        label: 'Button',
-    },
-};
-export const Small = {
-    args: {
-        size: 'sm',
-        label: 'Button',
-    },
+};
+export const icon = {
+    args: {
+        config: 'secondaryOutlineBtnMedium',
+        icon: { state: true, name: 'person', position: 'single' },
+    }
+};
+export const rightIcon = {
+    args: {
+        ...icon.args,
+        icon: { state: true, name: 'person', position: 'right' },
+    }
+};
+export const leftIcon = {
+    args: {
+        ...icon.args,
+        icon: { state: true, name: 'person', position: 'left' },
+    }
+};
+export const secondaryBtnMedium = {
+    args: {
+        config: 'secondaryBtnMedium'
+    }
+};
+export const secondaryOutlineBtnMedium = {
+    args: {
+        config: 'secondaryOutlineBtnMedium'
+    }
+};
+export const secondaryBtnSmall = {
+    args: {
+        config: 'secondaryBtnSmall'
+    }
+};
+export const secondaryOutlineBtnSmall = {
+    args: {
+        config: 'secondaryOutlineBtnSmall'
+    }
+};
+export const secondaryBtnLarge = {
+    args: {
+        config: 'secondaryBtnLarge'
+    }
+};
+export const secondaryOutlineBtnLarge = {
+    args: {
+        config: 'secondaryOutlineBtnLarge'
+    }
+};
+export const infoBtnMedium = {
+    args: {
+        config: 'infoBtnMedium'
+    }
+};
+export const infoOutlineBtnMedium = {
+    args: {
+        config: 'infoOutlineBtnMedium'
+    }
+};
+export const dangerBtnMedium = {
+    args: {
+        config: 'dangerBtnMedium'
+    }
+};
+export const dangerOtlineBtnMedium = {
+    args: {
+        config: 'dangerOutlineBtnMedium'
+    }
+};
+export const warningBtnMedium = {
+    args: {
+        config: 'warningBtnMedium'
+    }
+};
+export const warningOutlineBtnMedium = {
+    args: {
+        config: 'warningOutlineBtnMedium'
+    }
+};
+export const primaryBtnMedium = {
+    args: {
+        config: 'primaryBtnMedium'
+    }
+};
+export const primaryOutlineBtnMedium = {
+    args: {
+        config: 'primaryOutlineBtnMedium'
+    }
+};
+export const successBtnMedium = {
+    args: {
+        config: 'successBtnMedium'
+    }
+};
+export const successOutlineBtnMedium = {
+    args: {
+        config: 'successOutlineBtnMedium'
+    }
 };