@iroco/ui 0.51.1 → 0.52.0

package/Button.svelte

@@ -266,17 +266,18 @@ export let node;
 .iroco-ui-button:active {
   box-shadow: none;
 }
-.iroco-ui-button .iroco-ui-link {
-  background: none;
-  border: none;
-  font-family: "Arial";
-  color: #f2ebe3;
-  cursor: pointer;
-}
 .iroco-ui-button.disabled {
   background-color: #f5f5f5;
   cursor: default;
 }
 .iroco-ui-button.disabled:hover {
   box-shadow: none;
+}
+
+.iroco-ui-link {
+  background: none;
+  border: none;
+  font-family: "Arial";
+  color: #f2ebe3;
+  cursor: pointer;
 }</style>

package/NavBar.svelte

@@ -4,6 +4,7 @@ import { navigating } from "$app/stores";
 import { NavigationItemType } from "./definition.js";
 export let navigationItems;
 export let type;
+export let version = null;
 let active;
 const dispatch = createEventDispatcher();
 const handleClickLink = (menuItem) => {
@@ -50,6 +51,7 @@ $:
 			</li>
 		{/each}
 	</ul>
+	<div class="nav__version">{version == null ? '' : version}</div>
 </nav>
 
 <style>.font-color-blue {
@@ -559,14 +561,6 @@ $:
   box-shadow: none;
 }
 
-.iroco-ui-button .iroco-ui-link {
-  background: none;
-  border: none;
-  font-family: "Arial";
-  color: #f2ebe3;
-  cursor: pointer;
-}
-
 .iroco-ui-button.disabled {
   background-color: #f5f5f5;
   cursor: default;
@@ -576,6 +570,14 @@ $:
   box-shadow: none;
 }
 
+.iroco-ui-link {
+  background: none;
+  border: none;
+  font-family: "Arial";
+  color: #f2ebe3;
+  cursor: pointer;
+}
+
 .nav__sidebar__item, .nav__topbar__item {
   text-decoration: none;
   display: block;
@@ -616,6 +618,12 @@ $:
   border-bottom: 1px solid #00d692;
 }
 
+.nav__sidebar__version {
+  margin-left: auto;
+  padding-left: 2em;
+  color: #464452;
+}
+
 .nav__topbar {
   flex-grow: 1;
   display: flex;
@@ -674,6 +682,9 @@ $:
   .nav__sidebar__item:first-child {
     border-top: 1px solid #464452;
   }
+  .nav__sidebar__version {
+    display: none;
+  }
   .nav__topbar {
     height: 100%;
   }

package/NavBar.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         navigationItems: Array<NavigationItem>;
         type: 'sidebar' | 'topbar';
+        version?: string | null | undefined;
     };
     events: {
         click: MouseEvent;

package/Navigation.svelte

@@ -5,6 +5,7 @@ import NavBar from "./NavBar.svelte";
 export let navigationItems;
 export let type = "topbar";
 export let title = null;
+export let version = null;
 let showMenu = false;
 </script>
 
@@ -28,6 +29,7 @@ let showMenu = false;
 			on:click={() => (showMenu = false)}
 			{type}
 			{navigationItems}
+			{version}
 		/>
 	{/if}
 </div>
@@ -41,7 +43,7 @@ let showMenu = false;
 			<h1>{title}</h1>
 		{/if}
 	</div>
-	<NavBar {navigationItems} {type} />
+	<NavBar {navigationItems} {type} {version} />
 </div>
 
 <style>.font-color-blue {

package/Navigation.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         navigationItems: Array<NavigationItem>;
         type?: "sidebar" | "topbar" | undefined;
         title?: string | null | undefined;
+        version?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iroco/ui",
-  "version": "0.51.1",
+  "version": "0.52.0",
   "description": "Iroco design system based on Svelte",
   "main": "lib/index.ts",
   "svelte": "index.js",

package/scss/button.scss

@@ -53,14 +53,6 @@
 		box-shadow: none;
 	}
 
-	.iroco-ui-link {
-		background: none;
-		border: none;
-		font-family: fonts.$arial;
-		color: colors.$beige;
-		cursor: pointer;
-	}
-
 	&.disabled {
 		background-color: colors.$lightGrey;
 		cursor: default;
@@ -69,3 +61,11 @@
 		}
 	}
 }
+
+.iroco-ui-link {
+	background: none;
+	border: none;
+	font-family: fonts.$arial;
+	color: colors.$beige;
+	cursor: pointer;
+}