@iroco/ui 1.0.0-1 → 1.0.0-11

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;
@@ -14,10 +16,10 @@ let showMenu = false;
 <div class="navigation--mobile">
 	<div class="navigation--mobile__title-container">
 		{#if title == null}
-			<IrocoLogo width="10em" height="10em" />
+			<IrocoLogo {href} width="10em" height="10em" />
 		{:else}
-			<IconIrocoLogo width="3em" height="3em" {color} />
-			<h1>{title}</h1>
+			<IconIrocoLogo {href} width="3em" height="3em" {color} />
+			<h1><a {href} class="navigation-mobile__title-link">{title}</a></h1>
 		{/if}
 	</div>
 
@@ -39,121 +41,67 @@ 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} />
 </div>
 
-<style>.font-color-blue {
-  color: #00b9ff;
-}
-
-.font-color-darkBlue {
-  color: #211d28;
-}
-
-.font-color-nightBlue {
-  color: #18151e;
-}
-
-.font-color-green {
-  color: #00d692;
-}
-
-.font-color-red {
-  color: #ff504d;
-}
-
-.font-color-yellow {
-  color: #ffe032;
-}
-
-.font-color-beige {
-  color: #f2ebe3;
-}
-
-.font-color-darkBeige {
-  color: #a9a29e;
-}
-
-.font-color-mediumGrey {
-  color: #464452;
-}
-
-.font-color-darkGrey {
-  color: #33323a;
-}
-
-.font-color-lightGrey {
-  color: #f5f5f5;
-}
-
-.container-wide {
+<style>.container-wide {
   width: calc(100% - 20px);
   max-width: 2360px;
   margin-left: auto;
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 2560px) {
   .container-wide {
     max-width: 1620px;
   }
 }
-
 @media all and (max-width: 1800px) {
   .container-wide {
     max-width: 1280px;
   }
 }
-
 @media all and (max-width: 1440px) {
   .container-wide {
     max-width: 884px;
   }
 }
-
 @media all and (max-width: 1024px) {
   .container-wide {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-wide {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-wide {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-wide {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-wide {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-wide {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-large {
   width: calc(100% - 20px);
   max-width: 1280px;
@@ -161,49 +109,41 @@ let showMenu = false;
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 1440px) {
   .container-large {
     max-width: 884px;
   }
 }
-
 @media all and (max-width: 1024px) {
   .container-large {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-large {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-large {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-large {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-large {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-large {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-medium {
   width: calc(100% - 20px);
   max-width: 884px;
@@ -211,43 +151,36 @@ let showMenu = false;
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 1024px) {
   .container-medium {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-medium {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-medium {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-medium {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-medium {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-medium {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-small {
   width: calc(100% - 20px);
   max-width: 496px;
@@ -255,25 +188,21 @@ let showMenu = false;
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 425px) {
   .container-small {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-small {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-small {
     max-width: calc(100% - 20px);
   }
 }
-
 .navigation {
   display: flex;
   flex-direction: row;
@@ -281,25 +210,21 @@ let showMenu = false;
   align-items: center;
   width: 100%;
 }
-
 .navigation--mobile {
   display: none;
 }
-
 .navigation__title-container {
   display: flex;
   align-items: center;
   padding-left: 1em;
 }
-
 .navigation__title-container h1 {
   padding-left: 1em;
 }
-
 @media all and (max-width: 768px) {
   .navigation {
     display: none;
-    color: #f2ebe3;
+    color: var(--color-text);
   }
   .navigation--mobile {
     display: flex;
@@ -309,7 +234,7 @@ let showMenu = false;
     top: 0;
     z-index: 1;
     width: 100%;
-    border-bottom: 1px solid #464452;
+    border-bottom: 1px solid var(--color-border);
   }
   .navigation--mobile h1 {
     font-size: 2em;
@@ -317,7 +242,7 @@ let showMenu = false;
   .navigation--mobile__button {
     background-color: transparent;
     border: none;
-    color: #464452;
+    color: var(--color-icon-primary);
   }
   .navigation--mobile__title-container {
     display: flex;
@@ -326,4 +251,8 @@ let showMenu = false;
   .navigation--mobile__title-container h1 {
     padding-left: 0.5em;
   }
+}
+.navigation__title-link,
+.navigation-mobile__title-link {
+  color: var(--color-text-light);
 }</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.stories.svelte

@@ -0,0 +1,47 @@
+<script context="module">
+	import { NumberInput } from './index';
+
+	export const meta = {
+		title: 'Iroco-UI/Form/NumberInput',
+		component: NumberInput,
+		argTypes: {
+			id: {
+				control: { type: 'text' }
+			},
+			label: {
+				control: { type: 'text' }
+			},
+			placeholder: {
+				control: { type: 'text' }
+			},
+			error: {
+				control: { type: 'text' }
+			},
+			value: {
+				control: { type: 'number' }
+			},
+			min: {
+				control: { type: 'number' }
+			},
+			max: {
+				control: { type: 'number' }
+			}
+		}
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+	<form class="iroco-ui-form">
+		<NumberInput {...args} />
+	</form>
+</Template>
+
+<Story name="Default" />
+<Story name="Label" args={{ label: 'Label' }} />
+<Story name="Error" args={{ error: 'An error message' }} />
+<Story name="Placeholder" args={{ placeholder: 'A placeholder' }} />
+<Story name="Min / Max" args={{ min: 0, max: 10, value: 5 }} />

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

@@ -0,0 +1,77 @@
+export namespace meta {
+    export let title: string;
+    export { NumberInput as component };
+    export namespace argTypes {
+        namespace id {
+            namespace control {
+                let type: string;
+            }
+        }
+        namespace label {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace placeholder {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace error {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        namespace value {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+        }
+        namespace min {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+        }
+        namespace max {
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_6 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  NumberInputProps */
+/** @typedef {typeof __propDef.events}  NumberInputEvents */
+/** @typedef {typeof __propDef.slots}  NumberInputSlots */
+export default class NumberInput extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type NumberInputProps = typeof __propDef.props;
+export type NumberInputEvents = typeof __propDef.events;
+export type NumberInputSlots = typeof __propDef.slots;
+import { NumberInput } from './index';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/NumberInput.svelte

@@ -1,8 +1,8 @@
 <script>export let id;
 export let label;
-export let placeholder;
-export let error = null;
-export let value = null;
+export let placeholder = "";
+export let error = void 0;
+export let value = void 0;
 export let min;
 export let max;
 </script>
@@ -17,51 +17,7 @@ export let max;
 	{/if}
 </div>
 
-<style>.font-color-blue {
-  color: #00b9ff;
-}
-
-.font-color-darkBlue {
-  color: #211d28;
-}
-
-.font-color-nightBlue {
-  color: #18151e;
-}
-
-.font-color-green {
-  color: #00d692;
-}
-
-.font-color-red {
-  color: #ff504d;
-}
-
-.font-color-yellow {
-  color: #ffe032;
-}
-
-.font-color-beige {
-  color: #f2ebe3;
-}
-
-.font-color-darkBeige {
-  color: #a9a29e;
-}
-
-.font-color-mediumGrey {
-  color: #464452;
-}
-
-.font-color-darkGrey {
-  color: #33323a;
-}
-
-.font-color-lightGrey {
-  color: #f5f5f5;
-}
-
-.iroco-ui-form input,
+<style>.iroco-ui-form input,
 .iroco-ui-form textarea {
   outline: none;
   text-decoration: none;
@@ -72,9 +28,9 @@ export let max;
   flex-direction: column;
 }
 .iroco-ui-form .iroco-ui-input > input {
-  color: #f2ebe3;
-  background: #211d28;
-  border: 1px solid #211d28;
+  color: var(--color-text);
+  background: var(--color-body);
+  border: 1px solid var(--color-border);
   padding: 1em 1.5em;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -82,16 +38,16 @@ export let max;
   border-radius: 0.5em;
 }
 .iroco-ui-form .iroco-ui-input > input::placeholder {
-  color: rgba(242, 235, 227, 0.5);
+  color: var(--color-text-op-50);
 }
 .iroco-ui-form .iroco-ui-input > input.error {
-  border-color: #ff504d;
+  border-color: var(--color-danger);
 }
 .iroco-ui-form .iroco-ui-input > input.readonlyInput {
   cursor: not-allowed;
 }
 .iroco-ui-form .iroco-ui-label {
-  color: rgba(242, 235, 227, 0.6);
+  color: var(--color-text-op-60);
   font-weight: bold;
   padding-bottom: 10px;
   display: inline-block;
@@ -107,5 +63,5 @@ export let max;
 }
 .iroco-ui-form p.error {
   margin: 0;
-  color: #ff504d;
+  color: var(--color-danger);
 }</style>

package/dist/NumberInput.svelte.d.ts

@@ -3,10 +3,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id: string;
-        label: string | '';
-        placeholder: string | '';
-        error?: string | null | undefined;
-        value?: number | null | undefined;
+        label: string | '' | undefined;
+        placeholder?: string | '' | undefined;
+        error?: string | undefined;
+        value?: number | undefined;
         min: number | undefined;
         max: number | undefined;
     };

package/dist/RadioButton.stories.svelte

@@ -0,0 +1,39 @@
+<script context="module">
+	import { RadioButton } from './index';
+
+	export const meta = {
+		title: 'Iroco-UI/Form/RadioButton',
+		component: RadioButton,
+		argTypes: {
+			value: {
+				control: { type: 'string' }
+			},
+			group: {
+				control: { type: 'string' }
+			},
+			name: {
+				control: { type: 'string' }
+			},
+			checked: {
+				control: { type: 'boolean' }
+			}
+		}
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+
+	let group = 'bar';
+</script>
+
+<Template let:args>
+	<form class="iroco-ui-form">
+		<RadioButton bind:group name="name-hello" value="hello" {...args}>Hello</RadioButton>
+		<RadioButton bind:group name="name-foo" value="foo">Foo</RadioButton>
+		<RadioButton bind:group name="name-bar" value="bar">Bar</RadioButton>
+	</form>
+	Selected group : {group}
+</Template>
+
+<Story name="Default" />