@iroco/ui 1.0.0-3 → 1.0.0-5

package/dist/Navigation.svelte

@@ -15,12 +15,12 @@ let showMenu = false;
 
 <div class="navigation--mobile">
 	<div class="navigation--mobile__title-container">
-			{#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}
+		{#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">
@@ -50,112 +50,58 @@ let showMenu = false;
 	<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;
@@ -163,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;
@@ -213,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;
@@ -257,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;
@@ -283,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;
@@ -311,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;
@@ -319,7 +242,7 @@ let showMenu = false;
   .navigation--mobile__button {
     background-color: transparent;
     border: none;
-    color: #a9a29e;
+    color: var(--color-icon-primary);
   }
   .navigation--mobile__title-container {
     display: flex;
@@ -329,7 +252,7 @@ let showMenu = false;
     padding-left: 0.5em;
   }
 }
-
-.navigation__title-link, .navigation-mobile__title-link {
-  color: #ffffff;
+.navigation__title-link,
+.navigation-mobile__title-link {
+  color: var(--color-text-light);
 }</style>

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

@@ -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 #464452;
+  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/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" />

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

@@ -0,0 +1,56 @@
+export namespace meta {
+    export let title: string;
+    export { RadioButton as component };
+    export namespace argTypes {
+        namespace value {
+            namespace control {
+                let type: string;
+            }
+        }
+        namespace group {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace name {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace checked {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  RadioButtonProps */
+/** @typedef {typeof __propDef.events}  RadioButtonEvents */
+/** @typedef {typeof __propDef.slots}  RadioButtonSlots */
+export default class RadioButton extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type RadioButtonProps = typeof __propDef.props;
+export type RadioButtonEvents = typeof __propDef.events;
+export type RadioButtonSlots = typeof __propDef.slots;
+import { RadioButton } from './index';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/RadioButton.svelte

@@ -1,5 +1,4 @@
-<script>export const label = "";
-export let value;
+<script>export let value;
 export let group = null;
 export let name;
 export let checked;
@@ -16,52 +15,8 @@ $:
 	<slot />
 </label>
 
-<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-radio {
-  color: #f2ebe3;
+<style>.iroco-ui-radio {
+  color: var(--color-text);
   position: relative;
   margin-top: 0.5em;
   padding-left: 1.5em;
@@ -84,10 +39,10 @@ $:
   left: 0;
   height: 1em;
   width: 1em;
-  background-color: #f2ebe3;
+  background-color: var(--form-element-bg);
   border-radius: 50%;
 }
 
 .iroco-ui-radio input:checked ~ .radio-button-color {
-  background-color: #00d692;
+  background-color: var(--color-primary);
 }</style>

package/dist/RadioButton.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        label?: "" | undefined;
         value: string | null;
         group?: string | null | undefined;
         name: string | null;
@@ -18,6 +17,5 @@ export type RadioButtonProps = typeof __propDef.props;
 export type RadioButtonEvents = typeof __propDef.events;
 export type RadioButtonSlots = typeof __propDef.slots;
 export default class RadioButton extends SvelteComponent<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
-    get label(): "";
 }
 export {};