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

package/components/Accordion/Accordion.stories.d.ts

@@ -4,17 +4,27 @@ declare namespace _default {
     export const tags: string[];
     export namespace argTypes {
         namespace stayOpen {
-            const control: string;
+            namespace control {
+                const type: string;
+            }
         }
         namespace items {
-            const control_1: string;
+            export namespace control_1 {
+                const type_1: string;
+                export { type_1 as type };
+            }
             export { control_1 as control };
         }
     }
 }
 export default _default;
-export function Default(args: any): {
-    Component: typeof Accordion;
-    props: any;
-};
+export namespace Default {
+    namespace args {
+        const items_1: {
+            header: string;
+            content: string;
+        }[];
+        export { items_1 as items };
+    }
+}
 import Accordion from "./Accordion.svelte";

package/components/Accordion/Accordion.stories.js

@@ -5,17 +5,15 @@ export default {
     component: Accordion,
     tags: ['autodocs'],
     argTypes: {
-        stayOpen: { control: 'boolean' }, 
-        items: { control: 'object' } 
+        stayOpen: { control: {type:'boolean' } }, 
+        items: { control: { type: 'array' } },
     }
 };
 
 
 //  story with customized items
-export const Default = (args) => ({
-    Component: Accordion,
-    props: {
-        ...args,
+export const Default ={
+    args:{
         items: [ 
             {
                 header: 'Accordion Item #1',
@@ -27,4 +25,4 @@ export const Default = (args) => ({
             }
         ]
     }
-});
+}

package/components/Badge/Badge.stories.d.ts

@@ -1,6 +1,7 @@
 declare namespace _default {
     export const title: string;
     export { Badge as component };
+    export const tags: string[];
 }
 export default _default;
 export namespace yellow {

package/components/Badge/Badge.stories.js

@@ -1,55 +1,56 @@
 import Badge from './Badge.svelte'
 
-export default{
-    title:'FMS/Badge',
-    component:Badge
+export default {
+    title: 'FMS/Badge',
+    component: Badge,
+    tags: ['autodocs'],
 };
 
-export const yellow={
-    args:{
-        config:'yellow',
-        label:'Badges',
+export const yellow = {
+    args: {
+        config: 'yellow',
+        label: 'Badges',
     }
 };
-export const primaryLight={
-    args:{
-        config:'primaryLight',
-        label:'Badges',
+export const primaryLight = {
+    args: {
+        config: 'primaryLight',
+        label: 'Badges',
     }
 };
-export const secondaryLight={
-    args:{
-        config:'secondaryLight',
-        label:'Badges',
+export const secondaryLight = {
+    args: {
+        config: 'secondaryLight',
+        label: 'Badges',
     }
 };
-export const green={
-    args:{
-        config:'green',
-        label:'Badges',
+export const green = {
+    args: {
+        config: 'green',
+        label: 'Badges',
     }
 };
-export const grayLight={
-    args:{
-        config:'grayLight',
-        label:'Badges',
+export const grayLight = {
+    args: {
+        config: 'grayLight',
+        label: 'Badges',
     }
 };
-export const gray={
-    args:{
-        config:'gray',
-        label:'Badges',
+export const gray = {
+    args: {
+        config: 'gray',
+        label: 'Badges',
     }
 };
-export const red={
-    args:{
-        config:'red',
-        label:'Badges',
+export const red = {
+    args: {
+        config: 'red',
+        label: 'Badges',
     }
 };
-export const cyan={
-    args:{
-        config:'cyan',
-        label:'Badges',
+export const cyan = {
+    args: {
+        config: 'cyan',
+        label: 'Badges',
     }
 };

package/components/Badge/Badge.svelte

@@ -8,10 +8,9 @@ if (badgeConfig.hasOwnProperty(config)) {
 }
 </script>
 
-<Badge pill color='none' class={badgeStyles.join(' ')}>{label}</Badge>
+<Badge pill color="none" class={badgeStyles.join(' ')}>{label}</Badge>
 
-
-  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
 @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@@ -584,4 +583,4 @@ if (badgeConfig.hasOwnProperty(config)) {
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-}</style>
+}</style>

package/components/Breadcrumb/Breadcrumb.stories.js

@@ -13,7 +13,7 @@ export const Default={
     args:{
         newBreadcrumbs:[
             {title:'home',link:'/'},
-            {title:'contact',link:'/contact'},
+            {title:'contact',link:'https://stackoverflow.com/questions/73033899/pluginviteimport-analysis-failed-to-parse-source-for-import-analysis-because'},
             {title:'payment',link:'/contact/payment'},
         ]
     }

package/components/Button/Button.scss

@@ -44,6 +44,13 @@
   }
 }
 
+.disabled:disabled {
+
+  opacity: 0.5;
+  cursor: auto;
+
+}
+
 //large button
 .ebtn-large {
   height: $large-height;
@@ -674,7 +681,7 @@
 }
 
 .eoutline-successDark {
-  outline: 1px solid $success-dark;
+  outline: 1px solid $success-dark ;
 }
 
 .eoutline-successLight {

package/components/Button/Button.svelte

@@ -4,12 +4,14 @@
 	export let label = 'Button';
 	export let config = '';
 	export let icon = { state: false, name: 'person', position: 'right' };
-	export let shade = 'primary';
+	export let shade = '';
 	export let outlineShade = '';
+	export let size = '';
+	export let disabled =false;
 
 	let buttonStyles = [];
 	if (buttonConfig.hasOwnProperty(config)) {
-		buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`];
+		buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`, `ebtn-${size}`, `disabled`];
 	}
 
 	// icon button
@@ -25,7 +27,7 @@
 	console.log(buttonStyles);
 </script>
 
-<button {type} class={buttonStyles.join(' ')} on:click on:focus on:blur>
+<button {type} class={buttonStyles.join(' ')} on:click on:focus on:blur {disabled} >
 	<slot>
 		{#if label}
 			{label}
@@ -80,6 +82,10 @@
 .ebtn-medium i {
   font-size: 16px;
 }
+.disabled:disabled {
+  opacity: 0.5;
+  cursor: auto;
+}
 .ebtn-large {
   height: 52px;
   display: flex;

package/components/Button/Button.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ButtonEvents */
 /** @typedef {typeof __propDef.slots}  ButtonSlots */
 export default class Button extends SvelteComponentTyped<{
+    disabled?: boolean | undefined;
     type?: string | undefined;
     label?: string | undefined;
     config?: string | undefined;
@@ -12,6 +13,7 @@ export default class Button extends SvelteComponentTyped<{
     } | undefined;
     shade?: string | undefined;
     outlineShade?: string | undefined;
+    size?: string | undefined;
 }, {
     click: MouseEvent;
     focus: FocusEvent;
@@ -28,6 +30,7 @@ export type ButtonSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        disabled?: boolean | undefined;
         type?: string | undefined;
         label?: string | undefined;
         config?: string | undefined;
@@ -38,6 +41,7 @@ declare const __propDef: {
         } | undefined;
         shade?: string | undefined;
         outlineShade?: string | undefined;
+        size?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/components/Card/Card.stories.d.ts

@@ -1,6 +1,7 @@
 declare namespace _default {
     export const title: string;
     export { Card as component };
+    export const tags: string[];
     export namespace argTypes {
         namespace image {
             const control: string;

package/components/Card/Card.stories.js

@@ -4,6 +4,7 @@ import Card from './Card.svelte';
 export default {
     title: 'FMS/Card',
     component: Card,
+    tags: ['autodocs'],
     argTypes: {
         image: { control: 'text' },
         width: { control: 'text' },

package/components/CardIcon/CardIcon.scss

@@ -0,0 +1,95 @@
+@import './../variable.scss';
+
+:global(.custom-card-style) {
+	width: auto;
+	padding: 7px 10px;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 10px;
+	flex: 1 0 0;
+	border-radius: 10px;
+	border: 1px dashed $white-cardicon;
+	background: $white;
+}
+
+.cardicon-main {
+	width: 100%;
+	display: flex;
+	padding: 10px;
+	justify-content: space-between;
+	align-items: flex-start;
+	align-self: stretch;
+}
+
+.cardicon-content {
+	width: 100%;
+	display: flex;
+	color: $gray-cardicon;
+	text-align: right;
+	font-size: 30px;
+	@extend %common-fontstyle;
+	line-height: 40px;
+	padding: 10px;
+}
+
+:global(.cardicon-main .card-title) {
+	color: $black;
+	font-size: 18px;
+	@extend %common-fontstyle;
+	text-transform: capitalize;
+}
+
+:global(.cardicon-main i) {
+	width: 20px;
+	height: 20px;
+}
+
+.custom-body-slot {
+	color: $black;
+	font-size: 13px;
+	@extend %common-fontstyle;
+}
+
+%common-fontstyle {
+	font-family: $bodyFonts;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+%common {
+	flex-direction: column-reverse !important;
+}
+
+:global(.bottom-left) {
+	@extend %common;
+
+	.cardicon-main {
+		flex-direction: row-reverse;
+	}
+}
+
+:global(.bottom-right) {
+	@extend %common;
+}
+
+:global(.top-left) {
+	flex-direction: column;
+
+	.cardicon-main {
+		flex-direction: row-reverse;
+	}
+}
+
+:global(.top-right) {
+	flex-direction: column;
+}
+
+.right {
+	justify-content: end !important;
+}
+
+.top {
+	justify-content: start !important;
+}

package/components/CardIcon/CardIcon.stories.d.ts

@@ -0,0 +1,129 @@
+declare namespace _default {
+    export const title: string;
+    export { CardIcon as component };
+    export const tags: string[];
+    export namespace argTypes {
+        export namespace name {
+            namespace control {
+                const type: string;
+            }
+            const options: string[];
+        }
+        export namespace location {
+            export namespace control_1 {
+                const type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            const options_1: string[];
+            export { options_1 as options };
+        }
+        export namespace slotPosition {
+            export namespace control_2 {
+                const type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            const options_2: string[];
+            export { options_2 as options };
+        }
+        export namespace title_1 {
+            export namespace control_3 {
+                const type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        export { title_1 as title };
+        export namespace cardsubtitle {
+            export namespace control_4 {
+                const type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+        }
+        export namespace cardbody {
+            export namespace control_5 {
+                const type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+        }
+    }
+}
+export default _default;
+export namespace Default {
+    namespace args {
+        const name_1: string;
+        export { name_1 as name };
+        const location_1: string;
+        export { location_1 as location };
+        const title_2: string;
+        export { title_2 as title };
+        const cardsubtitle_1: string;
+        export { cardsubtitle_1 as cardsubtitle };
+        const cardbody_1: string;
+        export { cardbody_1 as cardbody };
+    }
+}
+export namespace topLeft {
+    export namespace args_1 {
+        const name_2: string;
+        export { name_2 as name };
+        const location_2: string;
+        export { location_2 as location };
+        const title_3: string;
+        export { title_3 as title };
+        const cardsubtitle_2: string;
+        export { cardsubtitle_2 as cardsubtitle };
+        const cardbody_2: string;
+        export { cardbody_2 as cardbody };
+    }
+    export { args_1 as args };
+}
+export namespace topRight {
+    export namespace args_2 {
+        const name_3: string;
+        export { name_3 as name };
+        const location_3: string;
+        export { location_3 as location };
+        const title_4: string;
+        export { title_4 as title };
+        const cardsubtitle_3: string;
+        export { cardsubtitle_3 as cardsubtitle };
+        const cardbody_3: string;
+        export { cardbody_3 as cardbody };
+    }
+    export { args_2 as args };
+}
+export namespace bottomLeft {
+    export namespace args_3 {
+        const name_4: string;
+        export { name_4 as name };
+        const location_4: string;
+        export { location_4 as location };
+        const title_5: string;
+        export { title_5 as title };
+        const cardsubtitle_4: string;
+        export { cardsubtitle_4 as cardsubtitle };
+        const cardbody_4: string;
+        export { cardbody_4 as cardbody };
+    }
+    export { args_3 as args };
+}
+export namespace bottomRight {
+    export namespace args_4 {
+        const name_5: string;
+        export { name_5 as name };
+        const location_5: string;
+        export { location_5 as location };
+        const title_6: string;
+        export { title_6 as title };
+        const cardsubtitle_5: string;
+        export { cardsubtitle_5 as cardsubtitle };
+        const cardbody_5: string;
+        export { cardbody_5 as cardbody };
+    }
+    export { args_4 as args };
+}
+import CardIcon from "./CardIcon.svelte";

package/components/CardIcon/CardIcon.stories.js

@@ -0,0 +1,77 @@
+import CardIcon from './CardIcon.svelte';
+
+export default {
+	title: 'FMS/CardIcon',
+	component: CardIcon,
+	tags: ['autodocs'],
+	argTypes: {
+		name: {
+			control: { type: 'select' },
+			options: ['people', 'exclamation-triangle', 'trophy']
+		},
+		location: {
+			control: { type: 'select' },
+			options: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+		},
+		slotPosition: {
+			control: { type: 'select' },
+			options: ['left', 'right']
+		},
+		title: {
+			control: { type: 'text' }
+		},
+		cardsubtitle: {
+			control: { type: 'text' }
+		},
+		cardbody: {
+			control: { type: 'text' }
+		}
+	}
+};
+
+export const Default = {
+	args: {
+		name: 'people',
+		location: 'bottom-right',
+		title: 'component title',
+		cardsubtitle: '45',
+		cardbody: 'table data'
+	}
+};
+
+export const topLeft = {
+	args: {
+		name: 'people',
+		location: 'top-left',
+		title: 'component title',
+		cardsubtitle: '45',
+		cardbody: 'table data'
+	}
+};
+export const topRight = {
+	args: {
+		name: 'people',
+		location: 'top-right',
+		title: 'component title',
+		cardsubtitle: '45',
+		cardbody: 'table data'
+	}
+};
+export const bottomLeft = {
+	args: {
+		name: 'people',
+		location: 'bottom-left',
+		title: 'component title',
+		cardsubtitle: '45',
+		cardbody: 'table data'
+	}
+};
+export const bottomRight = {
+	args: {
+		name: 'people',
+		location: 'bottom-right',
+		title: 'component title',
+		cardsubtitle: '45',
+		cardbody: 'table data'
+	}
+};