@iroco/ui 0.6.5 → 0.8.1

package/src/IconTrashCan.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let width = '5rem';
+	export let height = '5rem';
+	export let stroke = 'currentColor';
+</script>
+
+<svg
+	{width}
+	{height}
+	fill="none"
+	{stroke}
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+	/></svg
+>

package/src/Loader.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import IconIrocoLogo from './IconIrocoLogo.svelte';
+</script>
+
+<div class="rotate linear infinite">
+	<IconIrocoLogo width="4em" height="4em" />
+</div>
+
+<style>
+	.rotate {
+		animation: rotation 2s;
+	}
+
+	.linear {
+		animation-timing-function: linear;
+	}
+
+	.infinite {
+		animation-iteration-count: infinite;
+	}
+
+	@keyframes rotation {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(359deg);
+		}
+	}
+</style>

package/src/Navigation.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { NavigationItem } from '../definition';
+	import type { NavigationItem } from './definition';
 	import IconBurger from './IconBurger.svelte';
 	import IconIrocoLogo from './IconIrocoLogo.svelte';
 	import SideBar from './SideBar.svelte';
@@ -21,7 +21,11 @@
 	</button>
 
 	{#if showMenu}
-		<SideBar on:click={() => (showMenu = false)} {navigationItems} />
+		<SideBar
+			on:click_link={() => (showMenu = false)}
+			on:click={() => (showMenu = false)}
+			{navigationItems}
+		/>
 	{/if}
 </div>
 
@@ -39,7 +43,7 @@
 	.account__navigation {
 		display: block;
 		width: 100%;
-		border-bottom: 1px solid colors.$darkBeige;
+		border-bottom: 1px solid colors.$mediumGrey;
 		&--mobile {
 			display: none;
 		}
@@ -64,8 +68,9 @@
 				justify-content: space-between;
 				position: fixed;
 				top: 0;
+				z-index: 1;
 				width: 100%;
-				border-bottom: 1px solid colors.$darkBeige;
+				border-bottom: 1px solid colors.$mediumGrey;
 
 				h1 {
 					font: bold;
@@ -74,7 +79,7 @@
 				&__button {
 					background-color: transparent;
 					border: none;
-					color: colors.$darkBeige;
+					color: colors.$mediumGrey;
 				}
 				&__title-container {
 					display: flex;

package/src/SideBar.svelte

@@ -1,8 +1,20 @@
 <script lang="ts">
 	import IconClose from './IconClose.svelte';
 	import type { NavigationItem } from 'definition';
+	import { createEventDispatcher } from 'svelte';
 
 	export let navigationItems: Array<NavigationItem>;
+
+	let active: string;
+	const dispatch = createEventDispatcher();
+
+	const handleClickLink = (menuItem: NavigationItem) => {
+	  active = menuItem.name;
+	  if (typeof menuItem.hrefOrCallback === "function") {
+	  	menuItem.hrefOrCallback()
+	  }
+	  dispatch('click_link');
+	};
 </script>
 
 <nav data-testid="sidebar" class="account__sidebar">
@@ -11,9 +23,9 @@
 	</button>
 
 	<ul class="account__sidebar__item_container">
-		{#each navigationItems as { destination, name }}
-			<li class="account__sidebar__item">
-				<a href={destination}> {name}</a>
+		{#each navigationItems as item}
+			<li class="account__sidebar__item" class:active={active === item.name}>
+				<a on:click={() => handleClickLink(item)} href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback: '#'}> {item.name}</a>
 			</li>
 		{/each}
 	</ul>
@@ -26,40 +38,25 @@
 	.account__sidebar {
 		height: 100%;
 		width: 300px;
-		position: fixed;
+		position: absolute;
 		top: 70px;
-		z-index: 1;
 		overflow-x: hidden;
+		border-right: 1px solid colors.$mediumGrey;
 		&__item_container {
 			margin: 0;
 			padding: 0;
 			width: 100%;
 			height: 100%;
 		}
-
 		&__item {
-			padding: 2em 0;
+			padding: 2em 2em;
 			text-decoration: none;
 			font-size: 0.75em;
-			border-top:  1px solid colors.$darkBeige;
 			display: block;
-			a {
+			border-top: 1px solid colors.$mediumGrey;
+			border-bottom: 1px solid colors.$mediumGrey a {
 				padding-left: 1em;
 			}
-			&:hover {
-				background-color: colors.$darkBeige;
-			}
-			&:hover a {
-				color: colors.$darkBlue;
-			}
-
-			&:last-child {
-				border-bottom: 1px solid colors.$darkBeige;
-			}
-
-			&:first-child {
-				border: none;
-			}
 		}
 
 		&__item a {
@@ -70,6 +67,11 @@
 		&__close {
 			display: none;
 		}
+
+		.active {
+			border-top: 1px solid colors.$green;
+			border-bottom: 1px solid colors.$green;
+		}
 	}
 
 	@include screen-tablet {
@@ -82,11 +84,11 @@
 			padding: 0;
 			padding-top: 2em;
 			margin: 0;
+			border-right: none;
 			&__item_container {
 				padding: 0em;
 				margin-top: 2rem;
 			}
-
 			&__close {
 				display: block;
 				position: absolute;

package/src/TextInput.svelte

@@ -1,32 +1,110 @@
 <script lang="ts">
-  export enum TextType { text = "text", email = "email", password = "password" }
-
-  export let id: string;
-  export let type: TextType;
-  export let label: string | null = null;
-  export let placeholder: string | null = null;
-  export let error: string | null = null;
-  export let value: string | null = null;
-  export let onFocus: (e) => void
-  export let onBlur: (e) => void
-  export let readonly = false;
-
-  function typeAction(node: HTMLInputElement) {
-    node.type = type
-  }
+	export enum TextType {
+		text = 'text',
+		email = 'email',
+		password = 'password'
+	}
 
+	export let id: string;
+	export let type: TextType;
+	export let label: string | null = null;
+	export let placeholder: string | undefined;
+	export let error: string | null = null;
+	export let value: string | null = null;
+	export let onFocus: (e: FocusEvent) => void;
+	export let onBlur: (e: Event) => void;
+	export let readonly = false;
+	export let border = false;
+
+	function typeAction(node: HTMLInputElement) {
+	  node.type = type;
+	}
 </script>
 
 <div class="iroco-ui-input">
-  {#if label}
-    <label class="iroco-ui-label" for={id}>{label}</label>
-  {/if}
-  <input on:input bind:value on:focus={onFocus} on:blur={onBlur} id={id} type="text" placeholder={ placeholder } class:error="{ error !== null }" class:readonlyInput="{readonly == true}" use:typeAction readonly = { readonly } />
-  {#if error !=null}
-    <p data-testid="error" class="error">{error !== null ? error: ""}</p>
-  {/if}
+	{#if label}
+		<label class="iroco-ui-label" for={id}>{label}</label>
+	{/if}
+	<input
+		on:input
+		bind:value
+		on:focus={onFocus}
+		on:blur={onBlur}
+		{id}
+		type="text"
+		{placeholder}
+		class:border
+		class:error={error !== null}
+		class:readonlyInput={readonly == true}
+		use:typeAction
+		{readonly}
+	/>
+	{#if error != null}
+		<p data-testid="error" class="error">{error !== null ? error : ''}</p>
+	{/if}
 </div>
 
 <style lang="scss">
-  @use "../scss/forms";
+	@use "../scss/colors";
+	input,
+	textarea {
+		outline: none;
+		text-decoration: none;
+		font-size: 14px;
+
+		&:focus {
+			outline: none;
+			text-decoration: none;
+			font-size: 14px;
+		}
+	}
+
+	.iroco-ui-input {
+		display: flex;
+		flex-direction: column;
+
+		> input {
+			color: colors.$beige;
+			background: colors.$darkBlue;
+			border: 1px solid colors.$darkBlue;
+			padding: 1em 1.5em;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			border-radius: 0.5em;
+
+			&.border {
+				border: 1px solid colors.$beige;
+			}
+
+			&::placeholder {
+				color: rgba(colors.$beige, 0.5);
+			}
+			&.error {
+				border-color: colors.$red;
+			}
+			&.readonlyInput {
+				cursor: not-allowed;
+			}
+		}
+
+		.error {
+			color: colors.$red;
+		}
+	}
+
+	.iroco-ui-label {
+		color: rgba(colors.$beige, 0.6);
+		font-weight: bold;
+		padding-bottom: 10px;
+		display: inline-block;
+	}
+
+	.field {
+		margin-top: 20px;
+
+		&:first-child {
+			margin: 0;
+		}
+	}
 </style>

package/src/definition.ts

@@ -0,0 +1,10 @@
+export type NavigationItem = {
+    hrefOrCallback: string|(() => void);
+    name: string;
+};
+
+
+export enum ButtonKind {
+    REGULAR = "regular",
+    DANGER = "danger"
+}

package/src/index.ts

@@ -1,11 +1,15 @@
 import '../scss/style.scss';
-import Button from './Button.svelte';
-import TextInput from './TextInput.svelte';
-import RadioButton from './RadioButton.svelte';
-import NumberInput from './NumberInput.svelte'
-import Icon from './Icon.svelte'
-import IconInfo from './IconInfo.svelte'
-import SideBar from './SideBar.svelte'
-import Navigation from './Navigation.svelte'
-
-export { Button, TextInput, IconInfo, RadioButton, NumberInput, Icon, SideBar, Navigation };
+export { default as Button } from './Button.svelte';
+export { default as TextInput } from './TextInput.svelte'
+export { default as RadioButton } from './RadioButton.svelte';
+export { default as NumberInput } from './NumberInput.svelte'
+export { default as Icon } from './Icon.svelte'
+export { default as Loader } from './Loader.svelte'
+export { default as IconInfo } from './IconInfo.svelte'
+export { default as SideBar } from './SideBar.svelte'
+export { default as Navigation } from './Navigation.svelte'
+export { default as DataTable } from './DataTable.svelte'
+export { default as IconMore } from './IconMoreSign.svelte'
+export { default as IconFloppyDisk } from './IconFloppyDisk.svelte'
+export { default as IconTrashCan } from './IconTrashCan.svelte'
+export { default as Alert } from './Alert.svelte'