@iroco/ui 0.15.3 → 0.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iroco/ui",
-  "version": "0.15.3",
+  "version": "0.17.1",
   "description": "Iroco design system based on Svelte",
   "main": "lib/index.js",
   "module": "lib/index.mjs",
@@ -62,6 +62,7 @@
     "husky": "^7.0.2",
     "jest": "^26.6.3",
     "lint-staged": "^11.1.2",
+    "node-sass": "^7.0.1",
     "npm-watch": "^0.10.0",
     "prettier": "^2.3.1",
     "prettier-plugin-svelte": "^2.3.0",
@@ -75,7 +76,6 @@
     "svelte-jester": "^1.7.0",
     "svelte-preprocess": "^4.7.3",
     "ts-jest": "^26.5.5",
-    "node-sass": "^7.0.1",
     "typescript": "^4.3.3"
   },
   "peerDependencies": {
@@ -95,7 +95,8 @@
           "preprocess": true
         }
       ],
-      "^.+\\.js$": "babel-jest"
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.ts$": "ts-jest"
     },
     "testEnvironment": "jsdom",
     "moduleFileExtensions": [

package/scss/button.scss

@@ -0,0 +1,60 @@
+@use '../scss/colors';
+@use '../scss/fonts';
+@use '../scss/containers';
+@use '../scss/constants';
+
+.iroco-ui-button {
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: none;
+  flex-shrink: 0;
+  margin: 1em 0em;
+  position: relative;
+  text-transform: uppercase;
+  border-radius: constants.$border-radius;
+
+  &--basic {
+    background: colors.$beige;
+    border: 1px solid colors.$nightBlue;
+  }
+  &--dark {
+    background: colors.$nightBlue;
+    color: colors.$beige;
+  }
+  &--success {
+    background: colors.$green;
+  }
+  &--danger {
+    background: colors.$red;
+  }
+  &--regular {
+    padding: 1em 2em;
+  }
+  &--small {
+    padding: 0.5em 1em;
+  }
+
+  &--basic:hover, &--success:hover, &--danger:hover {
+    box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2);
+  }
+  &--dark:hover {
+    box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2);
+  }
+
+  &:active {
+    box-shadow: none;
+  }
+
+  &.disabled {
+    background-color: colors.$lightGrey;
+    cursor: default;
+    &:hover {
+      box-shadow: none;
+    }
+  }
+}

package/src/Button.svelte

@@ -20,65 +20,5 @@
 </button>
 
 <style lang="scss">
-	@use '../scss/colors';
-	@use '../scss/fonts';
-	@use '../scss/containers';
-	@use '../scss/constants';
-
-	.iroco-ui-button {
-		cursor: pointer;
-		-webkit-touch-callout: none;
-		-webkit-user-select: none;
-		-khtml-user-select: none;
-		-moz-user-select: none;
-		-ms-user-select: none;
-		user-select: none;
-		border: none;
-		flex-shrink: 0;
-		margin: 1em 0em;
-		position: relative;
-		text-transform: uppercase;
-		border-radius: constants.$border-radius;
-
-		&--basic {
-			background: colors.$beige;
-			border: 1px solid colors.$nightBlue;
-		}
-		&--dark {
-			background: colors.$nightBlue;
-			color: colors.$beige;
-		}
-		&--success {
-			background: colors.$green;
-		}
-		&--danger {
-			background: colors.$red;
-		}
-		&--regular {
-			padding: 1em 2em;
-		}
-		&--small {
-			padding: 0.5em 1em;
-		}
-
-		&--basic:hover, &--success:hover, &--danger:hover {
-			box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2);
-		}
-		&--dark:hover {
-			box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2);
-		}
-
-		&:active {
-			box-shadow: none;
-		}
-
-		&.disabled {
-			background-color: colors.$lightGrey;
-			cursor: default;
-			&:hover {
-				box-shadow: none;
-			}
-		}
-	}
-
+	@use '../scss/button';
 </style>

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,4 +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'
+