@iroco/ui 0.15.2 → 0.17.0

package/src/IrocoLogo.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	export let width = '10rem';
+	export let height = '10rem';
+</script>
+
+<a class='iroco-logo' href="/">
+  <svg viewBox="0 0 832.33 249.52" width={width} height={height}>
+    <title>Iroco</title>
+    <path
+      fill="white"
+      d="M412,81.41c-7.34,0-12.07-5.19-12.07-12.37S404.77,56.66,412,56.66,424.17,61.85,424.17,69,419.13,81.41,412,81.41Zm10.7,118.4H401V103.54h21.7Z"
+      transform="translate(-0.44 -0.49)"
+    />
+    <path
+      fill="white"
+      d="M505.77,123.71h-6.72c-18,0-27.2,8.26-27.2,28.43v47.67h-21.7V103.54h21.7v14.21h.3c5.5-9.32,15.44-15.28,28.43-15.28h5.19Z"
+      transform="translate(-0.44 -0.49)"
+    />
+    <path
+      fill="white"
+      d="M566.44,201.34c-33,0-49.21-21.54-49.21-49.66S533.43,102,566.44,102s49.35,21.39,49.35,49.66C615.79,179.64,599.29,201.34,566.44,201.34Zm0-80.22c-19.26,0-27.51,12.68-27.51,30.56,0,17.72,8.4,30.56,27.66,30.56s27.5-12.68,27.5-30.56S585.69,121.12,566.44,121.12Z"
+      transform="translate(-0.44 -0.49)"
+    />
+    <path
+      fill="white"
+      d="M721.23,186.52c-11.77,10.7-24.45,14.82-39.12,14.82-33.62,0-49.51-21.54-49.51-48.9,0-28.11,17.88-50.42,49.81-50.42,15.9,0,28,4.27,38.51,14.21L706.1,131.05c-6.88-6.72-14.21-9.93-23.53-9.93-18.8.15-28.27,13.9-28.27,31.32,0,16.66,8.1,29.8,28,29.8,9.17,0,16.35-2.9,24.3-10.54Z"
+      transform="translate(-0.44 -0.49)"
+    />
+    <path
+      fill="white"
+      d="M783.42,201.34c-33,0-49.21-21.54-49.21-49.66S750.41,102,783.42,102s49.35,21.39,49.35,49.66C832.77,179.64,816.27,201.34,783.42,201.34Zm0-80.22c-19.26,0-27.51,12.68-27.51,30.56,0,17.72,8.41,30.56,27.66,30.56s27.5-12.68,27.5-30.56S802.67,121.12,783.42,121.12Z"
+      transform="translate(-0.44 -0.49)"
+    />
+    <path
+      fill="white"
+      d="M122.8,144.26a30.6,30.6,0,0,0-8.07,1.23,5.53,5.53,0,0,0-3.46,3.53,28,28,0,0,0-.92,8.46v76.24a28,28,0,0,0,.92,8.46,5.53,5.53,0,0,0,3.46,3.53,30.18,30.18,0,0,0,8.07,1.23V250q-7.06-.45-19.52-.46-13.22,0-19.67.46v-3.07a30.33,30.33,0,0,0,8.07-1.23,5.49,5.49,0,0,0,3.45-3.53,27.59,27.59,0,0,0,.93-8.46V157.48a27.59,27.59,0,0,0-.93-8.46,5.49,5.49,0,0,0-3.45-3.53,30.75,30.75,0,0,0-8.07-1.23v-3.08q6.45.47,19.67.47,12.3,0,19.52-.47Z"
+      transform="translate(-0.44 -0.49)"
+    />
+    <path
+      fill="#00D692"
+      d="M64.64,198.52a102.78,102.78,0,1,1,77.13,0l-7.41-18.29a83,83,0,1,0-62.31,0Z"
+      transform="translate(-0.44 -0.49)"
+    />
+  </svg>
+</a>

package/src/NavBar.svelte

@@ -13,7 +13,7 @@
 	  active = menuItem.name;
 	  if (typeof menuItem.hrefOrCallback === 'function') {
 	    menuItem.hrefOrCallback();
-    return false; // to avoid calling href
+	    return false; // to avoid calling href
 	  }
 	  dispatch('click_link');
 	};
@@ -26,10 +26,11 @@
 
 	<ul class="nav__{type}__item-container">
 		{#each navigationItems as item}
-			<li class="nav__{type}__item" class:active={active === item.name}>
+			<li class="nav__{type}__item" class:active={active === item.name}  >
 				<a
 					on:click={() => handleClickLink(item)}
 					href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback : '#'}
+					class:iroco-ui-button= { item.isButton() }
 				>
 					{item.name}</a
 				>
@@ -40,7 +41,9 @@
 
 <style lang="scss">
 	@use '../scss/colors';
+	@use '../scss/constants';
 	@import '../scss/containers';
+	@import '../scss/button';
 
 	.nav {
 		&__sidebar,
@@ -53,6 +56,7 @@
 			&__item a {
 				color: colors.$beige;
 				font-size: 2em;
+
 			}
 			&__close {
 				display: none;

package/src/Navigation.svelte

@@ -2,19 +2,25 @@
 	import type { NavigationItem } from './definition';
 	import IconBurger from './IconBurger.svelte';
 	import IconIrocoLogo from './IconIrocoLogo.svelte';
+	import IrocoLogo from './IrocoLogo.svelte';
 	import NavBar from './NavBar.svelte';
 
 	export let navigationItems: Array<NavigationItem>;
 	export let type: 'sidebar' | 'topbar' = "topbar";
-	export let title: string;
+	export let title: string | null = null;
 
 	let showMenu = false;
+
 </script>
 
 <div class="navigation--mobile">
 	<div class="navigation--mobile__title-container">
-		<IconIrocoLogo width="3em" height="3em" />
-		<h1>{title}</h1>
+		{#if title == null}
+			<IrocoLogo width="10em" height="10em"/>
+		{:else}
+			<IconIrocoLogo width="3em" height="3em" />
+			<h1>{title}</h1>
+		{/if}
 	</div>
 
 	<button on:click={() => (showMenu = true)} class="navigation--mobile__button">
@@ -33,8 +39,12 @@
 
 <div class="navigation">
 	<div class="navigation__title-container">
-		<IconIrocoLogo width="3em" height="3em" />
-		<h1>{title}</h1>
+		{#if title == null}
+			<IrocoLogo width="10em" height="10em"/>
+		{:else}
+			<IconIrocoLogo width="3em" height="3em" />
+			<h1>{title}</h1>
+		{/if}
 	</div>
 	<NavBar {navigationItems} { type } />
 </div>

package/src/definition.ts

@@ -1,8 +1,16 @@
-export type NavigationItem = {
+export class NavigationItem  {
     hrefOrCallback: string|(() => void);
     name: string;
-};
+    
+    constructor (name: string, hrefOrCallback: string|(() => void)) {
+      this.hrefOrCallback = hrefOrCallback;
+      this.name = name;
+    }
 
+    isButton(): boolean {
+      return typeof this.hrefOrCallback === 'function'
+    }
+};
 
 export enum ButtonKind {
     REGULAR = "regular",

package/src/index.ts

@@ -15,3 +15,7 @@ export { default as IconFloppyDisk } from './IconFloppyDisk.svelte'
 export { default as IconTrashCan } from './IconTrashCan.svelte'
 export { default as Alert } from './Alert.svelte'
 export { default as IconIrocoLogo } from './IconIrocoLogo.svelte'
+export { default as IrocoLogo } from './IrocoLogo.svelte'
+export * from './definition'
+
+