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

package/components/RadioButton/RadioButton.svelte.d.ts

@@ -0,0 +1,41 @@
+/** @typedef {typeof __propDef.props}  RadioButtonProps */
+/** @typedef {typeof __propDef.events}  RadioButtonEvents */
+/** @typedef {typeof __propDef.slots}  RadioButtonSlots */
+export default class RadioButton extends SvelteComponentTyped<{
+    size?: string | undefined;
+    options?: ({
+        value: number;
+        label: string;
+        disabled?: undefined;
+    } | {
+        value: number;
+        label: string;
+        disabled: boolean;
+    })[] | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type RadioButtonProps = typeof __propDef.props;
+export type RadioButtonEvents = typeof __propDef.events;
+export type RadioButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+        options?: ({
+            value: number;
+            label: string;
+            disabled?: undefined;
+        } | {
+            value: number;
+            label: string;
+            disabled: boolean;
+        })[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Sidebar/Sidebar.scss

@@ -0,0 +1,87 @@
+// Importing variables from variable.scss file
+@import './../variable.scss';
+
+.row {
+  --bs-gutter-x: -0.5rem;
+}
+
+.icon-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 60px;
+  background-color: #fff;
+}
+
+.icon-sidebar .toggleButton {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  gap: 32px;
+}
+
+.icon-sidebar-content ul {
+  padding: 20px;
+  color: $primary-dark;
+  gap: 32px;
+}
+
+#offcanvasScrollingLabel {
+  color: $secondary-dark;
+  font-size: 28px;
+  font-weight: 600;
+}
+
+ul {
+  color: $primary-dark;
+  gap: 4px;
+}
+
+.nav-item {
+  display: flex;
+  width: 241px;
+  padding: 15px;
+  align-items: center;
+  gap: 10px;
+  border-radius: 4px;
+  border: 1px solid $primary-dark;
+}
+
+.nav-item .item-name {
+  color: $primary-dark;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  font-family: 'Roboto';
+}
+
+.toggleButton {
+  background-color: transparent;
+  border: #fff;
+  cursor: pointer;
+}
+
+.material-icons {
+  font-size: 24px;
+  color: $primary-dark;
+}
+
+:global(.offcanvas-start) {
+  width: 274px;
+  border-right: none;
+}
+
+:global(.offcanvas.offcanvas-start) {
+  width: 274px;
+  border-right: none;
+}
+
+:global(.offcanvas-body) {
+  padding: 0.5rem 0.5rem;
+}
+
+.offcanvas-header {
+  padding: 0.5rem 0.5rem;
+}

package/components/Sidebar/Sidebar.stories.d.ts

@@ -0,0 +1,28 @@
+import Sidebar from "./Sidebar.svelte";
+declare const _default: {
+    title: string;
+    component: typeof Sidebar;
+    argTypes: {
+        companyName: {
+            control: {
+                type: string;
+            };
+        };
+        navItems: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: ({ companyName, navItems }: {
+    companyName: any;
+    navItems: any;
+}) => {
+    Component: typeof Sidebar;
+    props: {
+        companyName: any;
+        navItems: any;
+    };
+};

package/components/Sidebar/Sidebar.stories.js

@@ -0,0 +1,27 @@
+import Sidebar from "./Sidebar.svelte";
+export default {
+    title: 'FMS/Sidebar',
+    component: Sidebar,
+    argTypes: {
+        companyName: { control: { type: 'text' } },
+        navItems: { control: { type: 'object' } }
+    }
+};
+const Template = ({ companyName, navItems }) => ({
+    Component: Sidebar,
+    props: { companyName, navItems }
+});
+export const Default = Template.bind({});
+Default.args = {
+    companyName: 'Vertfarm',
+    navItems: [
+        { name: 'Home', icon: 'home' },
+        { name: 'About', icon: 'person' },
+        { name: 'Services', icon: 'settings' },
+        { name: 'Contact', icon: 'email' },
+        { name: 'Home', icon: 'home' },
+        { name: 'About', icon: 'person' },
+        { name: 'Services', icon: 'settings' },
+        { name: 'Contact', icon: 'email' }
+    ]
+};

package/components/Sidebar/Sidebar.svelte

@@ -0,0 +1,144 @@
+<script>
+	import { Offcanvas } from 'sveltestrap';
+	export let companyName = 'Vertfarm';
+	export let navItems = [
+		{ name: 'Home', icon: 'home' },
+		{ name: 'About', icon: 'person' },
+		{ name: 'Services', icon: 'settings' },
+		{ name: 'Contact', icon: 'email' },
+		{ name: 'Home', icon: 'home' },
+		{ name: 'About', icon: 'person' },
+		{ name: 'Services', icon: 'settings' },
+		{ name: 'Contact', icon: 'email' }
+	];
+	let isOpen = false;
+</script>
+
+<div class="container-fluid">
+	<div class="row">
+		<!-- Toggle button for offcanvas -->
+		<div class="col-auto icon-sidebar">
+			<button
+				class="toggleButton"
+				type="button"
+				data-bs-toggle="offcanvas"
+				data-bs-target="#offcanvasScrolling"
+				aria-controls="offcanvasScrolling"
+				on:click={() => (isOpen = true)}
+			>
+				<span class="material-icons">{'keyboard_double_arrow_right'}</span>
+			</button>
+			<!-- Icon Sidebar -->
+			<div class="icon-sidebar-content">
+				<ul class="nav flex-column">
+					{#each navItems as item, index}
+						<li>
+							<span class="material-icons">{item.icon}</span>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		</div>
+		<!-- Offcanvas menu -->
+    <div>
+		<Offcanvas class="offcanvas offcanvas-start" scroll {isOpen} backdrop={false}>
+			<div class="offcanvas-header">
+				<h5 class="offcanvas-title" id="offcanvasScrollingLabel">{companyName}</h5>
+				<button
+					type="button"
+					class="toggleButton"
+					data-bs-dismiss="offcanvas"
+					aria-label="Close"
+					on:click={() => (isOpen = false)}
+				>
+					<span class="material-icons">{'keyboard_double_arrow_left'}</span>
+				</button>
+			</div>
+			<div class="offcanvas-body">
+				<ul class="nav flex-column">
+					{#each navItems as item, index}
+						<li class="nav-item">
+							<span class="material-icons">{item.icon}</span>
+							<span class="item-name">{item.name}</span>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		</Offcanvas>
+    </div>
+	</div>
+</div>
+<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");
+.row {
+  --bs-gutter-x: -0.5rem;
+}
+.icon-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 60px;
+  background-color: #fff;
+}
+.icon-sidebar .toggleButton {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  gap: 32px;
+}
+.icon-sidebar-content ul {
+  padding: 20px;
+  color: #007FD8;
+  gap: 32px;
+}
+#offcanvasScrollingLabel {
+  color: #00A855;
+  font-size: 28px;
+  font-weight: 600;
+}
+ul {
+  color: #007FD8;
+  gap: 4px;
+}
+.nav-item {
+  display: flex;
+  width: 241px;
+  padding: 15px;
+  align-items: center;
+  gap: 10px;
+  border-radius: 4px;
+  border: 1px solid #007FD8;
+}
+.nav-item .item-name {
+  color: #007FD8;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  font-family: "Roboto";
+}
+.toggleButton {
+  background-color: transparent;
+  border: #fff;
+  cursor: pointer;
+}
+.material-icons {
+  font-size: 24px;
+  color: #007FD8;
+}
+:global(.offcanvas-start) {
+  width: 274px;
+  border-right: none;
+}
+:global(.offcanvas.offcanvas-start) {
+  width: 274px;
+  border-right: none;
+}
+:global(.offcanvas-body) {
+  padding: 0.5rem 0.5rem;
+}
+.offcanvas-header {
+  padding: 0.5rem 0.5rem;
+}</style>

package/components/Sidebar/Sidebar.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  SidebarProps */
+/** @typedef {typeof __propDef.events}  SidebarEvents */
+/** @typedef {typeof __propDef.slots}  SidebarSlots */
+export default class Sidebar extends SvelteComponentTyped<{
+    companyName?: string | undefined;
+    navItems?: {
+        name: string;
+        icon: string;
+    }[] | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        companyName?: string | undefined;
+        navItems?: {
+            name: string;
+            icon: string;
+        }[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Switches/Switch.scss

@@ -0,0 +1,12 @@
+@import '../variable.scss';
+
+:global(.form-check-input:focus) {
+    border-color: rgba(0, 0, 0, .25);
+    box-shadow: none;
+}
+
+:global(.form-check-input:checked) {
+    background-color: $primary-dark;
+    border-color: $primary-dark;
+    border: 1.5px solid $primary-dark !important;
+}

package/components/Switches/Switch.stories.d.ts

@@ -0,0 +1,87 @@
+declare namespace _default {
+    export const title: string;
+    export { Switch as component };
+    export const tags: string[];
+    export namespace argTypes {
+        namespace label {
+            namespace control {
+                const type: string;
+            }
+        }
+        namespace disable {
+            export namespace control_1 {
+                const type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace enable {
+            export namespace control_2 {
+                const type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace size {
+            export namespace control_3 {
+                const type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+            export const options: string[];
+        }
+    }
+}
+export default _default;
+export namespace Default {
+    namespace args {
+        const label_1: string;
+        export { label_1 as label };
+        const disable_1: string;
+        export { disable_1 as disable };
+        const enable_1: string;
+        export { enable_1 as enable };
+        const size_1: string;
+        export { size_1 as size };
+    }
+}
+export namespace enabledSwitch {
+    export namespace args_1 {
+        const label_2: string;
+        export { label_2 as label };
+        const disable_2: string;
+        export { disable_2 as disable };
+        const enable_2: string;
+        export { enable_2 as enable };
+        const size_2: string;
+        export { size_2 as size };
+    }
+    export { args_1 as args };
+}
+export namespace enabledWithDisabledSwitch {
+    export namespace args_2 {
+        const label_3: string;
+        export { label_3 as label };
+        const disable_3: string;
+        export { disable_3 as disable };
+        const enable_3: string;
+        export { enable_3 as enable };
+        const size_3: string;
+        export { size_3 as size };
+    }
+    export { args_2 as args };
+}
+export namespace diabledButNotEnabledSwitch {
+    export namespace args_3 {
+        const label_4: string;
+        export { label_4 as label };
+        const disable_4: string;
+        export { disable_4 as disable };
+        const enable_4: string;
+        export { enable_4 as enable };
+        const size_4: string;
+        export { size_4 as size };
+    }
+    export { args_3 as args };
+}
+import Switch from "./Switch.svelte";

package/components/Switches/Switch.stories.js

@@ -0,0 +1,50 @@
+import Switch from './Switch.svelte';
+
+export default{
+    title: 'FMS/Switch',
+    component: Switch,
+    tags:['autodocs'],
+    argTypes:{
+        label:{control:{type:'text'}},
+        disable: { control: { type: 'text' } },
+        enable: { control: { type: 'text' } },
+        size: { control: { type: 'select'},options:['lg','md'] }
+    }
+};
+
+
+export const Default = {
+    args:{
+        label:'clicked',
+        disable:'false',
+        enable:'false',
+        size:'lg'
+    }
+}
+
+export const enabledSwitch = {
+    args:{
+        label:'clicked',
+        disable:'false',
+        enable:'true',
+        size:'lg'
+    }
+}
+
+export const enabledWithDisabledSwitch = {
+    args:{
+        label:'clicked',
+        disable:'true',
+        enable:'true',
+        size:'lg'
+    }
+}
+
+export const diabledButNotEnabledSwitch = {
+    args:{
+        label:'clicked',
+        disable:'true',
+        enable:'false',
+        size:'lg'
+    }
+}