@iroco/ui 0.50.1 → 0.51.1

package/Button.svelte

@@ -266,6 +266,13 @@ 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;

package/NavBar.svelte

@@ -1,6 +1,7 @@
 <script>import IconClose from "./IconClose.svelte";
 import { createEventDispatcher } from "svelte";
 import { navigating } from "$app/stores";
+import { NavigationItemType } from "./definition.js";
 export let navigationItems;
 export let type;
 let active;
@@ -31,15 +32,21 @@ $:
 	<ul class="nav__{type}__item-container">
 		{#each navigationItems as item}
 			<li class="nav__{type}__item" class:active={isActive(active, item)}>
-				<a
-					on:click={() => handleClickLink(item)}
-					href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback : '#'}
-					class:iroco-ui-button={item.button}
-					class:iroco-ui-button--small={item.button}
-					class:iroco-ui-button--success={item.button}
-				>
-					{item.name}
-				</a>
+				{#if item.type === NavigationItemType.FORM}
+					<form method="POST" action={item.hrefOrCallback}>
+						<button class="iroco-ui-link" type="submit">{item.name}</button>
+					</form>
+				{:else}
+					<a
+						on:click={() => handleClickLink(item)}
+						href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback : '#'}
+						class:iroco-ui-button={item.type === NavigationItemType.BUTTON}
+						class:iroco-ui-button--small={item.type === NavigationItemType.BUTTON}
+						class:iroco-ui-button--success={item.type === NavigationItemType.BUTTON}
+					>
+						{item.name}
+					</a>
+				{/if}
 			</li>
 		{/each}
 	</ul>
@@ -552,6 +559,14 @@ $:
   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;

package/README.md

@@ -1,38 +1,55 @@
-# create-svelte
+# iroco-ui
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+[![Circle CI](https://circleci.com/gh/iroco-co/iroco-ui.png?circle-token=218e3654fb138427bb709b068ed847b58f8d4ac7&style=svg)](https://app.circleci.com/pipelines/github/iroco-co/iroco-ui)
 
-## Creating a project
+Design system for Iroco [based on SvelteKit](https://kit.svelte.dev/docs/packaging).
 
-If you're seeing this, you've probably already done this step. Congrats!
+See the [Documentation](https://iroco-co.github.io/iroco-ui/) (not in sync anymore : to be restored with storybook)
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
+# develop
 
-# create a new project in my-app
-npm create svelte@latest my-app
+To install dependencies :
+
+```shell
+~/src/iroco-ui$ npm ci
 ```
 
-## Developing
+Building :
+
+```shell
+~/src/iroco-ui$ npm run build
+```
+
+Releasing :
+
+```shell
+~/iroco-ui$ cd package ; npm publish
+```
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+# documentation (to be done with storybook)
 
-```bash
-npm run dev
+The docs directory contains the documentation app deployed on github pages. To install dependencies :
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+```shell
+~/src/iroco-ui/docs$ npm ci
 ```
 
-## Building
+You can add/update components documentation into `docs/src/pages/components` and update the left menu in `docs/src/includes/sidebar.md`.
 
-To create a production version of your app:
+When you have to work on the CSS for components, you can have hot reloading. To do so you have to make the iroco-ui build watched with :
 
-```bash
-npm run build
+```shell
+~/src/iroco-ui$ npx npm-watch build
 ```
 
-You can preview the production build with `npm run preview`.
+And in the same time launch the dev server for docs :
+
+```shell
+~/src/iroco-ui/docs$ npm run dev
+```
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+To build the documentation (in docs) :
+
+```shell
+~/src/iroco-ui/docs$ npm run build
+```

package/definition.d.ts

@@ -1,8 +1,13 @@
 export declare class NavigationItem {
     hrefOrCallback: string | (() => void);
     name: string;
-    button: boolean;
-    constructor(name: string, hrefOrCallback: string | (() => void), button?: boolean);
+    type: NavigationItemType;
+    constructor(name: string, hrefOrCallback: string | (() => void), type?: NavigationItemType);
+}
+export declare enum NavigationItemType {
+    BUTTON = 0,
+    ANCHOR = 1,
+    FORM = 2
 }
 export declare enum TextInputType {
     text = "text",

package/definition.js

@@ -1,13 +1,19 @@
 export class NavigationItem {
     hrefOrCallback;
     name;
-    button;
-    constructor(name, hrefOrCallback, button = false) {
+    type;
+    constructor(name, hrefOrCallback, type = NavigationItemType.ANCHOR) {
         this.hrefOrCallback = hrefOrCallback;
         this.name = name;
-        this.button = button;
+        this.type = type;
     }
 }
+export var NavigationItemType;
+(function (NavigationItemType) {
+    NavigationItemType[NavigationItemType["BUTTON"] = 0] = "BUTTON";
+    NavigationItemType[NavigationItemType["ANCHOR"] = 1] = "ANCHOR";
+    NavigationItemType[NavigationItemType["FORM"] = 2] = "FORM";
+})(NavigationItemType || (NavigationItemType = {}));
 export var TextInputType;
 (function (TextInputType) {
     TextInputType["text"] = "text";

package/package.json

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

package/scss/button.scss

@@ -53,6 +53,14 @@
 		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;