@iroco/ui 1.0.0-1 → 1.0.0-3

package/README.md

@@ -6,6 +6,59 @@ Design system for Iroco [based on SvelteKit](https://kit.svelte.dev/docs/packagi
 
 See the [Documentation](https://iroco-co.github.io/iroco-ui/) (not in sync anymore : to be restored with storybook)
 
+# Install in your svelte application
+
+Prerequisites:
+
+- @sveltejs/kit: ^2.5.0
+- svelte: ^4.2.10
+
+```sh
+# latest
+npm install @iroco/ui
+# next
+npm install @iroco/ui@next
+```
+
+## Minimal scaffolding
+
+`src/app.scss`
+
+```scss
+@use 'node_modules/@iroco/ui/dist/scss/colors';
+@use 'node_modules/@iroco/ui/dist/scss/fonts';
+@use 'node_modules/@iroco/ui/dist/scss/style';
+@use 'node_modules/@iroco/ui/dist/scss/constants';
+@import 'node_modules/@iroco/ui/dist/scss/containers';
+```
+
+Example of layout with navigation
+
+`src/routes/+layout.svelte`
+
+```svelte
+<script>
+   import '../app.scss';
+   import { Navigation, NavigationItem } from '@iroco/ui';
+</script>
+
+<Navigation
+   navigationItems={[new NavigationItem("About", "/about"),]}
+   type="topbar"
+/>
+<main class="main">
+   <slot />
+</main>
+
+<style lang="scss">
+  @use "node_modules/@iroco/ui/dist/scss/colors.scss";
+  @use "node_modules/@iroco/ui/dist/scss/constants.scss";
+  @import "node_modules/@iroco/ui/dist/scss/containers.scss";
+  @import "node_modules/@iroco/ui/dist/scss/button.scss";
+</style>
+
+```
+
 # develop
 
 To install dependencies :

package/dist/Alert.svelte

@@ -86,5 +86,5 @@ export let callback;
   background-color: transparent;
   border: none;
   cursor: pointer;
-  color: #f2ebe3;
+  color: #a9a29e;
 }</style>

package/dist/Button.stories.svelte

@@ -34,9 +34,6 @@
 	</Button>
 </Template>
 
+<Story name="Default"></Story>
+<Story name="Success" args={{ kind: 'success' }} />
 <Story name="Danger" args={{ kind: 'danger' }} />
-
-<!-- Dynamic snippet should be disabled for this story -->
-<Story name="Button No Args">
-	<Button>Label</Button>
-</Story>

package/dist/Button.svelte

@@ -237,6 +237,7 @@ export let node;
   border-radius: 0.3em;
 }
 .iroco-ui-button--basic {
+  color: #18151e;
   background: #f2ebe3;
   border: 1px solid #18151e;
 }
@@ -267,7 +268,9 @@ export let node;
   box-shadow: none;
 }
 .iroco-ui-button.disabled {
-  background-color: #f5f5f5;
+  background-color: #a9a29e;
+  color: #33323a;
+  border-color: #464452;
   cursor: default;
 }
 .iroco-ui-button.disabled:hover {

package/dist/IconIrocoLogo.svelte

@@ -1,16 +1,20 @@
 <script>import { Color } from "./definition";
+export let href = "/";
+export let ariaLabel = "go to Iroco home";
 export let width = "5rem";
 export let height = "5rem";
 export let color = Color.green;
 </script>
 
-<svg {width} {height} viewBox="0 0 54 53" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path
-		d="M30.009 29.9999C29.3241 30.0677 28.7761 30.1355 28.4336 30.2033C28.0912 30.3389 27.8857 30.5423 27.7487 30.8812C27.6117 31.2202 27.5432 31.7626 27.5432 32.5084V47.1524C27.5432 47.8982 27.6117 48.4406 27.7487 48.7795C27.8857 49.1185 28.0912 49.3219 28.4336 49.4575C28.7761 49.5931 29.2556 49.6609 30.009 49.6609V50.2711C29.1186 50.2033 27.8172 50.2033 26.2419 50.2033C24.5295 50.2033 23.2282 50.2033 22.4062 50.2711V49.7965C23.0912 49.7287 23.6391 49.6609 23.9816 49.5931C24.3241 49.4575 24.5295 49.2541 24.6665 48.9151C24.8035 48.5762 24.872 48.0338 24.872 47.288V32.5762C24.872 31.8304 24.8035 31.288 24.6665 30.949C24.5295 30.6101 24.3241 30.4067 23.9816 30.2711C23.6391 30.1355 23.1597 30.0677 22.4062 30.0677V29.4575C23.2282 29.5253 24.5295 29.5253 26.2419 29.5253C27.8172 29.5253 29.1186 29.5253 30.009 29.4575V29.9999Z"
-		fill="white"
-	/>
-	<path
-		d="M18.7079 40.4406C11.1737 37.3897 6.24219 30.2033 6.24219 22.1355C6.24219 11.2202 15.2148 2.33887 26.2422 2.33887C37.2696 2.33887 46.2422 11.2202 46.2422 22.1355C46.2422 30.2033 41.3107 37.4575 33.7764 40.4406L32.2696 36.9151C38.3655 34.4745 42.3381 28.6439 42.3381 22.0677C42.3381 13.2541 35.0778 6.06768 26.1737 6.06768C17.2696 6.06768 10.0093 13.2541 10.0093 22.0677C10.0093 28.5762 13.9819 34.4067 20.0778 36.9151L18.7079 40.4406Z"
-		fill={color}
-	/>
-</svg>
+<a class="iroco-logo" {href} aria-label={ariaLabel}>
+	<svg {width} {height} viewBox="0 0 54 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M30.009 29.9999C29.3241 30.0677 28.7761 30.1355 28.4336 30.2033C28.0912 30.3389 27.8857 30.5423 27.7487 30.8812C27.6117 31.2202 27.5432 31.7626 27.5432 32.5084V47.1524C27.5432 47.8982 27.6117 48.4406 27.7487 48.7795C27.8857 49.1185 28.0912 49.3219 28.4336 49.4575C28.7761 49.5931 29.2556 49.6609 30.009 49.6609V50.2711C29.1186 50.2033 27.8172 50.2033 26.2419 50.2033C24.5295 50.2033 23.2282 50.2033 22.4062 50.2711V49.7965C23.0912 49.7287 23.6391 49.6609 23.9816 49.5931C24.3241 49.4575 24.5295 49.2541 24.6665 48.9151C24.8035 48.5762 24.872 48.0338 24.872 47.288V32.5762C24.872 31.8304 24.8035 31.288 24.6665 30.949C24.5295 30.6101 24.3241 30.4067 23.9816 30.2711C23.6391 30.1355 23.1597 30.0677 22.4062 30.0677V29.4575C23.2282 29.5253 24.5295 29.5253 26.2419 29.5253C27.8172 29.5253 29.1186 29.5253 30.009 29.4575V29.9999Z"
+			fill="white"
+		/>
+		<path
+			d="M18.7079 40.4406C11.1737 37.3897 6.24219 30.2033 6.24219 22.1355C6.24219 11.2202 15.2148 2.33887 26.2422 2.33887C37.2696 2.33887 46.2422 11.2202 46.2422 22.1355C46.2422 30.2033 41.3107 37.4575 33.7764 40.4406L32.2696 36.9151C38.3655 34.4745 42.3381 28.6439 42.3381 22.0677C42.3381 13.2541 35.0778 6.06768 26.1737 6.06768C17.2696 6.06768 10.0093 13.2541 10.0093 22.0677C10.0093 28.5762 13.9819 34.4067 20.0778 36.9151L18.7079 40.4406Z"
+			fill={color}
+		/>
+	</svg>
+</a>

package/dist/IconIrocoLogo.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 import { Color } from './definition';
 declare const __propDef: {
     props: {
+        href?: string | undefined;
+        ariaLabel?: string | undefined;
         width?: string | undefined;
         height?: string | undefined;
         color?: Color | undefined;

package/dist/IrocoLogo.svelte

@@ -1,14 +1,10 @@
-<script>import { createEventDispatcher } from "svelte";
-import { base } from "$app/paths";
+<script>export let href = `/`;
+export let ariaLabel = "go to Iroco home";
 export let width = "10rem";
 export let height = "10rem";
-const dispatch = createEventDispatcher();
-function clickOnLogo() {
-  dispatch("click_logo");
-}
 </script>
 
-<a class="iroco-logo" href="{base}/" aria-label="go to Iroco home" on:click={clickOnLogo}>
+<a class="iroco-logo" {href} aria-label={ariaLabel}>
 	<svg viewBox="0 0 832.33 249.52" role="img" {width} {height}>
 		<title>Iroco Logo</title>
 		<path

package/dist/IrocoLogo.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        href?: string | undefined;
+        ariaLabel?: string | undefined;
         width?: string | undefined;
         height?: string | undefined;
     };
     events: {
-        click_logo: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/NavBar.svelte

@@ -523,6 +523,7 @@ $:
 }
 
 .iroco-ui-button--basic {
+  color: #18151e;
   background: #f2ebe3;
   border: 1px solid #18151e;
 }
@@ -562,7 +563,9 @@ $:
 }
 
 .iroco-ui-button.disabled {
-  background-color: #f5f5f5;
+  background-color: #a9a29e;
+  color: #33323a;
+  border-color: #464452;
   cursor: default;
 }
 

package/dist/Navigation.stories.svelte

@@ -0,0 +1,49 @@
+<script context="module">
+	import Navigation from './Navigation.svelte';
+	import { NavigationItem, NavigationItemType } from './definition';
+
+	export const meta = {
+		title: 'Navigation',
+		component: Navigation,
+		argTypes: {
+			type: {
+				control: { type: 'select' },
+				options: ['sidebar', 'topbar']
+			},
+			title: {
+				control: { type: 'text' }
+			},
+			version: {
+				control: { type: 'text' }
+			},
+			color: {
+				control: { type: 'color' }
+			}
+
+		},
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+	<Navigation {...args}
+							navigationItems={[
+								new NavigationItem('About', `/about`),
+				new NavigationItem('Foo', `/foo`),
+				new NavigationItem('Bar', `/bar`),
+				new NavigationItem('Button', `/bar`, NavigationItemType.BUTTON),
+				new NavigationItem('Anchor', `/bar`, NavigationItemType.ANCHOR),
+				new NavigationItem('Form', `/bar`, NavigationItemType.FORM)
+				]}>
+
+	</Navigation>
+</Template>
+
+<Story name="Default" />
+<Story name="Sidebar" args={{ type: 'sidebar' }} />
+
+<Story name="Title" args={{ title: 'Alternative title' }}></Story>
+<Story name="Color" args={{ color: '#ABCDEF' }}></Story>

package/dist/Navigation.stories.svelte.d.ts

@@ -0,0 +1,59 @@
+export namespace meta {
+    export let title: string;
+    export { Navigation as component };
+    export namespace argTypes {
+        export namespace type {
+            namespace control {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            let options: string[];
+        }
+        export namespace title_1 {
+            export namespace control_1 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_1 as control };
+        }
+        export { title_1 as title };
+        export namespace version {
+            export namespace control_2 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_2 as control };
+        }
+        export namespace color {
+            export namespace control_3 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_3 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  NavigationProps */
+/** @typedef {typeof __propDef.events}  NavigationEvents */
+/** @typedef {typeof __propDef.slots}  NavigationSlots */
+export default class Navigation extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type NavigationProps = typeof __propDef.props;
+export type NavigationEvents = typeof __propDef.events;
+export type NavigationSlots = typeof __propDef.slots;
+import Navigation from './Navigation.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/Navigation.svelte

@@ -3,6 +3,8 @@ import IconIrocoLogo from "./IconIrocoLogo.svelte";
 import IrocoLogo from "./IrocoLogo.svelte";
 import NavBar from "./NavBar.svelte";
 import { Color } from "./definition";
+import { base } from "$app/paths";
+export let href = `${base}/`;
 export let navigationItems;
 export let type = "topbar";
 export let title = null;
@@ -13,12 +15,12 @@ let showMenu = false;
 
 <div class="navigation--mobile">
 	<div class="navigation--mobile__title-container">
-		{#if title == null}
-			<IrocoLogo width="10em" height="10em" />
-		{:else}
-			<IconIrocoLogo width="3em" height="3em" {color} />
-			<h1>{title}</h1>
-		{/if}
+			{#if title == null}
+				<IrocoLogo {href} width="10em" height="10em" />
+			{:else}
+				<IconIrocoLogo {href} width="3em" height="3em" {color} />
+				<h1><a {href} class="navigation-mobile__title-link">{title}</a></h1>
+			{/if}
 	</div>
 
 	<button title="Menu button" on:click={() => (showMenu = true)} class="navigation--mobile__button">
@@ -39,10 +41,10 @@ let showMenu = false;
 <div class="navigation">
 	<div class="navigation__title-container">
 		{#if title == null}
-			<IrocoLogo width="10em" height="10em" />
+			<IrocoLogo {href} width="10em" height="10em" />
 		{:else}
-			<IconIrocoLogo width="3em" height="3em" />
-			<h1>{title}</h1>
+			<IconIrocoLogo {href} width="3em" height="3em" />
+			<h1><a class="navigation__title-link" {href}>{title}</a></h1>
 		{/if}
 	</div>
 	<NavBar {navigationItems} {type} {version} />
@@ -317,7 +319,7 @@ let showMenu = false;
   .navigation--mobile__button {
     background-color: transparent;
     border: none;
-    color: #464452;
+    color: #a9a29e;
   }
   .navigation--mobile__title-container {
     display: flex;
@@ -326,4 +328,8 @@ let showMenu = false;
   .navigation--mobile__title-container h1 {
     padding-left: 0.5em;
   }
+}
+
+.navigation__title-link, .navigation-mobile__title-link {
+  color: #ffffff;
 }</style>

package/dist/Navigation.svelte.d.ts

@@ -3,6 +3,7 @@ import type { NavigationItem } from './definition';
 import { Color } from './definition';
 declare const __propDef: {
     props: {
+        href?: string | undefined;
         navigationItems: Array<NavigationItem>;
         type?: "sidebar" | "topbar" | undefined;
         title?: string | null | undefined;

package/dist/NumberInput.svelte

@@ -74,7 +74,7 @@ export let max;
 .iroco-ui-form .iroco-ui-input > input {
   color: #f2ebe3;
   background: #211d28;
-  border: 1px solid #211d28;
+  border: 1px solid #464452;
   padding: 1em 1.5em;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/TextInput.svelte

@@ -111,7 +111,7 @@ textarea:focus {
 .iroco-ui-input > input {
   color: #f2ebe3;
   background: #211d28;
-  border: 1px solid #211d28;
+  border: 1px solid #464452;
   padding: 1em 1.5em;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/scss/button.scss

@@ -19,23 +19,29 @@
 	border-radius: constants.$border-radius;
 
 	&--basic {
-		background: colors.$beige;
-		border: 1px solid colors.$nightBlue;
+		color: colors.$buttonSecondaryLabel;
+		background: colors.$buttonSecondaryBackground;
+		border: 1px solid colors.$buttonSecondaryBorder;
 	}
+
 	&--dark {
-		background: colors.$nightBlue;
-		color: colors.$beige;
+		background: colors.$buttonPrimaryBackgroundDark;
+		color: colors.$buttonPrimaryLabelDark;
 	}
+
 	&--success {
-		background: colors.$green;
+		background: colors.$success;
 		color: colors.$nightBlue;
 	}
+
 	&--danger {
-		background: colors.$red;
+		background: colors.$danger;
 	}
+
 	&--regular {
 		padding: 1em 2em;
 	}
+
 	&--small {
 		padding: 0.5em 1em;
 	}
@@ -45,6 +51,7 @@
 	&--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);
 	}
@@ -54,8 +61,11 @@
 	}
 
 	&.disabled {
-		background-color: colors.$lightGrey;
+		background-color: colors.$buttonDisabledBackground;
+		color: colors.$buttonDisabledLabel;
+		border-color: colors.$buttonDisabledBorder;
 		cursor: default;
+
 		&:hover {
 			box-shadow: none;
 		}
@@ -66,6 +76,6 @@
 	background: none;
 	border: none;
 	font-family: fonts.$arial;
-	color: colors.$beige;
+	color: colors.$text;
 	cursor: pointer;
 }

package/dist/scss/check.scss

@@ -1,3 +1,4 @@
+/* @deprecated does not seem to be used anywhere */
 .ui-check {
 	width: 30px;
 	min-width: 30px;

package/dist/scss/colors.scss

@@ -1,9 +1,12 @@
+// Declarative colors
+
 $blue: #00b9ff;
 $darkBlue: #211d28;
 $nightBlue: #18151e;
 $green: #00d692;
 $red: #ff504d;
 $yellow: #ffe032;
+$white: #ffffff;
 $beige: #f2ebe3;
 $darkBeige: #a9a29e;
 $mediumGrey: #464452;
@@ -13,33 +16,77 @@ $lightGrey: #f5f5f5;
 .font-color-blue {
 	color: $blue;
 }
+
 .font-color-darkBlue {
 	color: $darkBlue;
 }
+
 .font-color-nightBlue {
 	color: $nightBlue;
 }
+
 .font-color-green {
 	color: $green;
 }
+
 .font-color-red {
 	color: $red;
 }
+
 .font-color-yellow {
 	color: $yellow;
 }
+
 .font-color-beige {
 	color: $beige;
 }
+
 .font-color-darkBeige {
 	color: $darkBeige;
 }
+
 .font-color-mediumGrey {
 	color: $mediumGrey;
 }
+
 .font-color-darkGrey {
 	color: $darkGrey;
 }
+
 .font-color-lightGrey {
 	color: $lightGrey;
 }
+
+// Semantic colors
+
+$primary: $green;
+
+$success: $green;
+$danger: $red;
+$warning: $yellow;
+
+$background: $darkBlue;
+$text: $beige;
+$textLight: $white;
+
+$iconPrimary: $darkBeige;
+$border: $mediumGrey;
+
+$formElementBackground: $beige;
+$formElementBorder: $beige;
+$formTextPlaceholder: $beige;
+
+$buttonPrimaryLabel: $beige;
+$buttonPrimaryBackground: $primary;
+$buttonPrimaryBorder: $nightBlue;
+
+$buttonPrimaryBackgroundDark: $nightBlue;
+$buttonPrimaryLabelDark: $beige;
+
+$buttonSecondaryLabel: $nightBlue;
+$buttonSecondaryBackground: $beige;
+$buttonSecondaryBorder: $nightBlue;
+
+$buttonDisabledLabel: $darkGrey;
+$buttonDisabledBackground: $darkBeige;
+$buttonDisabledBorder: $mediumGrey;

package/dist/scss/fields/_input.scss

@@ -1,3 +1,4 @@
+@use './../colors';
 .ui-fields-input {
 	width: 100%;
 	transition: width linear 100ms;
@@ -36,7 +37,7 @@
 			left: 0;
 			width: 0;
 			height: 3px;
-			background: $green;
+			background: colors.$green;
 			transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
 		}
 
@@ -45,7 +46,7 @@
 		}
 
 		> input {
-			@include Arial(1em, $darkBlue);
+			@include Arial(1em, colors.$darkBlue);
 			flex: 1;
 			padding: 10px 15px;
 			text-overflow: ellipsis;
@@ -53,7 +54,7 @@
 			overflow: hidden;
 
 			&::placeholder {
-				color: rgba($darkBlue, 0.3);
+				color: rgba(colors.$darkBlue, 0.3);
 				font-style: italic;
 			}
 		}
@@ -82,7 +83,7 @@
 				-ms-user-select: none;
 				user-select: none;
 				flex-shrink: 0;
-				border-top: solid $beige 1px;
+				border-top: solid colors.$beige 1px;
 				background: white;
 				transition: background linear 100ms;
 
@@ -92,14 +93,14 @@
 
 				&:hover,
 				&.selected {
-					background: $lightGrey;
+					background: colors.$lightGrey;
 				}
 			}
 		}
 	}
 
 	> .instructions {
-		@include Arial(1em, $darkBeige);
+		@include Arial(1em, colors.$darkBeige);
 		margin-top: 10px;
 	}
 
@@ -111,14 +112,14 @@
 		margin-top: 15px;
 
 		> span {
-			@include Arial(0.9em, $red);
+			@include Arial(0.9em, colors.$red);
 			margin-left: 10px;
 		}
 	}
 
 	> .warning {
 		> span {
-			color: $blue;
+			color: colors.$blue;
 		}
 	}
 
@@ -137,11 +138,7 @@
 
 	&.dark {
 		> .container {
-			background: $darkBlue;
-
-			&:after {
-				//background: $blue;
-			}
+			background: colors.$background;
 
 			> input {
 				padding: 15px 20px;

package/dist/scss/forms.scss

@@ -13,8 +13,8 @@
 		flex-direction: column;
 		> input {
 			color: colors.$beige;
-			background: colors.$darkBlue;
-			border: 1px solid colors.$darkBlue;
+			background: colors.$background;
+			border: 1px solid colors.$border;
 			padding: 1em 1.5em;
 			text-overflow: ellipsis;
 			white-space: nowrap;

package/dist/scss/iroco.scss

@@ -2,6 +2,8 @@
 @use 'fonts';
 @use 'style';
 
+/** @deprectated : does not seem to be used anywhere */
+
 *,
 *::before,
 *::after {
@@ -31,6 +33,6 @@ html {
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 		font-kerning: normal;
-		background: colors.$darkBlue;
+		background: colors.$background;
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@iroco/ui",
-	"version": "1.0.0-1",
+	"version": "1.0.0-3",
 	"description": "Iroco design system based on Svelte",
 	"main": "dist/index.js",
 	"scripts": {
@@ -14,7 +14,7 @@
 		"format": "prettier --plugin-search-dir . --write .",
 		"clean": "rm -rf dist && npm cache clean --force",
 		"release": "npm run format && npm run build && release-it --only-version",
-		"storybook": "storybook dev -p 5173",
+		"storybook": "storybook dev -p 5175",
 		"build-storybook": "storybook build"
 	},
 	"devDependencies": {