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

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/components/variable.scss

@@ -96,6 +96,10 @@ $blue-500: rgba(13, 110, 253, 1);
 
 $Title-Color: #152536;
 
+// cardicon color private
+$gray-cardicon:#444;
+$white-cardicon:#B8B8B8;
+
 $box-shadow-green: rgba(11, 235, 49, 0.25);
 //Button sizes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -63,6 +63,10 @@
     "./components/Card/Card.scss": "./components/Card/Card.scss",
     "./components/Card/Card.stories": "./components/Card/Card.stories.js",
     "./components/Card/Card.svelte": "./components/Card/Card.svelte",
+    "./components/CardIcon/CardIcon.scss": "./components/CardIcon/CardIcon.scss",
+    "./components/CardIcon/CardIcon.stories": "./components/CardIcon/CardIcon.stories.js",
+    "./components/CardIcon/CardIcon.svelte": "./components/CardIcon/CardIcon.svelte",
+    "./components/CardIcon/CardIconConfig": "./components/CardIcon/CardIconConfig.js",
     "./components/CheckBox/Checkbox.scss": "./components/CheckBox/Checkbox.scss",
     "./components/CheckBox/Checkbox.stories": "./components/CheckBox/Checkbox.stories.js",
     "./components/CheckBox/Checkbox.svelte": "./components/CheckBox/Checkbox.svelte",