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

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

@@ -2,7 +2,8 @@ import Badge from './Badge.svelte'
 
 export default{
     title:'FMS/Badge',
-    component:Badge
+    component:Badge,
+    tags: ['autodocs'],
 };
 
 export const yellow={

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/CheckBox/Checkbox.svelte.d.ts

@@ -5,8 +5,8 @@ export default class Checkbox extends SvelteComponentTyped<{
     disable: any;
     enable: any;
     label?: string | undefined;
-    value?: string | undefined;
     size?: string | undefined;
+    value?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -20,8 +20,8 @@ declare const __propDef: {
         disable: any;
         enable: any;
         label?: string | undefined;
-        value?: string | undefined;
         size?: string | undefined;
+        value?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/ModalWindow/Modal.stories.d.ts

@@ -1,6 +1,7 @@
 declare namespace _default {
     export const title: string;
     export { Modal as component };
+    export const tags: string[];
     export namespace argTypes {
         namespace content {
             const control: string;
@@ -22,6 +23,8 @@ export namespace Default {
         export { content_1 as content };
         const header_1: string;
         export { header_1 as header };
+        export const closeBtn: string;
+        export const saveBtn: string;
         const open_1: boolean;
         export { open_1 as open };
     }

package/components/ModalWindow/Modal.stories.js

@@ -3,6 +3,7 @@ import Modal from './Modal.svelte';
 export default {
     title: 'FMS/Modal', 
     component: Modal,
+    tags: ['autodocs'],
     argTypes: {
         content: { control: 'text' }, 
         header: { control: 'text' }, 
@@ -14,6 +15,8 @@ export const Default = {
     args: {
         content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
         header: 'Modal Title',
+        closeBtn:"Close",
+        saveBtn:"Save Changes",
         open: true,
     }
 };

package/components/ModalWindow/Modal.svelte

@@ -3,7 +3,9 @@ import { Modal, ModalBody, ModalFooter, ModalHeader } from "sveltestrap";
 import Icon from "../Icon/Icon.svelte";
 export let content = "";
 export let header = "";
-export let open = true;
+export let closeBtn = "";
+export let saveBtn = "";
+export let open = false;
 export let toggle = () => open = !open;
 </script>
 
@@ -38,8 +40,14 @@ export let toggle = () => open = !open;
 			</div>
 		</ModalBody>
 		<ModalFooter>
-			<Button config="secondaryOutlineBtnMedium" on:click={toggle}>Close</Button>
-			<Button config="successBtnMedium" on:click={toggle}>Save changes</Button>
+			<slot name="footer">
+				{#if closeBtn || saveBtn}
+					<Button config="secondaryOutlineBtnMedium" on:click={toggle}>{closeBtn}</Button>
+					<Button config="successBtnMedium" on:click={toggle}>{saveBtn}</Button>
+				{:else}
+					<slot />
+				{/if}
+			</slot>
 		</ModalFooter>
 	</Modal>
 </div>

package/components/ModalWindow/Modal.svelte.d.ts

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         content?: string | undefined;
         header?: string | undefined;
+        closeBtn?: string | undefined;
+        saveBtn?: string | undefined;
         open?: boolean | undefined;
         toggle?: (() => boolean) | undefined;
     };
@@ -13,6 +15,7 @@ declare const __propDef: {
         header: {};
         content: {};
         default: {};
+        footer: {};
     };
 };
 export type ModalProps = typeof __propDef.props;

package/components/Sidebar/Sidebar.scss

@@ -5,6 +5,10 @@
   color: $white;
 }
 
+%commom-background-line {
+  background: $white;
+}
+
 %sidebar-styles {
   background: $primary-dark;
 }
@@ -14,8 +18,15 @@
   background: $blue-700;
 }
 
+%common-li-styles {
+  display: flex;
+  padding: 15px 32px;
+  align-items: center;
+  gap: 8px;
+}
+
 .row {
-  --bs-gutter-x: 1rem;
+  --bs-gutter-x: 0rem;
 }
 
 .icon-sidebar {
@@ -30,24 +41,22 @@
 .line {
   width: 88px;
   height: 1px;
-  background: $white;
-  margin-left: -7px;
+  @extend %commom-background-line;
 }
 
 .icon-btn {
-  padding: 20px;
+  padding: 20px 27px;
 }
 
 .icon-sidebar-content .toggle-button {
   @extend %common-styles;
 }
 
-.icon-sidebar-content ul {
-  display: flex;
-  align-items: center;
-  padding: 20px;
+.icon-sidebar-content ul li {
   @extend %common-styles;
-  gap: 32px;
+  @extend %common-li-styles;
+  padding: 16px 32px;
+
 }
 
 .icon-sidebar-content ul .active {
@@ -71,11 +80,7 @@ ul {
 }
 
 .nav-item {
-  display: flex;
-  width: 274px;
-  padding: 15px 32px;
-  align-items: center;
-  gap: 8px;
+  @extend %common-li-styles;
 }
 
 .nav-item .item-name {
@@ -93,7 +98,7 @@ ul {
 }
 
 .material-icons {
-  font-size: 24px;
+  font-size: 16px;
   color: $white;
 }
 
@@ -109,7 +114,5 @@ ul {
 .line-open {
   width: 274px;
   height: 1px;
-  @extend %common-styles;
-}
-
-
+  @extend %commom-background-line;
+}

package/components/Sidebar/Sidebar.svelte

@@ -54,8 +54,10 @@
 						data-bs-dismiss="offcanvas"
 						aria-label="Close"
 						on:click={() => (isOpen = false)}
-					>
-						<span class="material-icons">{'keyboard_double_arrow_left'}</span>
+					>   
+					  <span class="material-icons">
+						<Icon  iconName='chevron-double-left'/>
+					</span>
 					</button>
 				</div>
 				<div class="line-open" />
@@ -84,9 +86,12 @@
 @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");
-.line-open, ul, .icon-sidebar-content ul, .icon-sidebar-content .toggle-button {
+ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
   color: #ffffff;
 }
+.line-open, .line {
+  background: #ffffff;
+}
 :global(.offcanvas-body) {
   background: #007FD8;
 }
@@ -94,8 +99,14 @@
   border-left: 2px solid #ffffff;
   background: #084298;
 }
+.nav-item, .icon-sidebar-content ul li {
+  display: flex;
+  padding: 15px 32px;
+  align-items: center;
+  gap: 8px;
+}
 .row {
-  --bs-gutter-x: 1rem;
+  --bs-gutter-x: 0rem;
 }
 .icon-sidebar {
   position: fixed;
@@ -108,17 +119,12 @@
 .line {
   width: 88px;
   height: 1px;
-  background: #ffffff;
-  margin-left: -7px;
 }
 .icon-btn {
-  padding: 20px;
+  padding: 20px 27px;
 }
-.icon-sidebar-content ul {
-  display: flex;
-  align-items: center;
-  padding: 20px;
-  gap: 32px;
+.icon-sidebar-content ul li {
+  padding: 16px 32px;
 }
 :global(.offcanvas-body) {
   padding: 0rem 0rem;
@@ -127,13 +133,6 @@
   color: #ffffff;
   font-size: 28px;
 }
-.nav-item {
-  display: flex;
-  width: 274px;
-  padding: 15px 32px;
-  align-items: center;
-  gap: 8px;
-}
 .nav-item .item-name {
   line-height: 22px;
 }
@@ -143,7 +142,7 @@
   cursor: pointer;
 }
 .material-icons {
-  font-size: 24px;
+  font-size: 16px;
   color: #ffffff;
 }
 :global(.offcanvas.offcanvas-start) {

package/components/Table/Table.stories.d.ts

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

package/components/Table/Table.stories.js

@@ -2,6 +2,7 @@ import Table from './Table.svelte';
 export default {
     title: 'FMS/Table', 
     component: Table,
+    tags:['autodocs'],
     argTypes: {
         header: { control: 'array' },
         tableData: { control: 'array' },

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

@@ -2,11 +2,11 @@
 /** @typedef {typeof __propDef.events}  TextFieldEvents */
 /** @typedef {typeof __propDef.slots}  TextFieldSlots */
 export default class TextField extends SvelteComponentTyped<{
+    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
     type?: string | undefined;
     placeholder?: string | undefined;
     value?: string | undefined;
-    disabled?: boolean | undefined;
     valid?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -18,11 +18,11 @@ export type TextFieldSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
         type?: string | undefined;
         placeholder?: string | undefined;
         value?: string | undefined;
-        disabled?: boolean | undefined;
         valid?: boolean | undefined;
     };
     events: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",