@iroco/ui 1.0.0-2 → 1.0.0-4

package/dist/NavBar.svelte

@@ -98,6 +98,59 @@ $:
   color: #f5f5f5;
 }
 
+:root {
+  --color-white-op-20: rgba(255, 255, 255, 0.2);
+  --color-white-op-30: rgba(255, 255, 255, 0.3);
+  --color-black-op-20: rgba(0, 0, 0, 0.2);
+  --color-black-op-40: rgba(0, 0, 0, 0.4);
+  --color-black-op-60: rgba(0, 0, 0, 0.6);
+  --color-dark-blue-op-30: #211d284d;
+  /* semantic colors */
+  --color-primary-light: #82eec7;
+  --color-primary: #00d692;
+  --color-primary-bg: #00d69280;
+  --color-primary-dark: #00a873;
+  --color-secondary-light: #ffffff;
+  --color-secondary: #f2ebe3;
+  --color-secondary-dark: #a9a29e;
+  /* feedback */
+  --color-success: #00d692;
+  --color-success-bg: #00d69280;
+  --color-danger: #ff504d;
+  --color-danger-bg: #ff504d80;
+  --color-warning: #ffe032;
+  --color-warning-bg: #ffe03280;
+  /* typography */
+  --color-text-light: #ffffff;
+  --color-text: #f2ebe3;
+  --color-text-op-50: #f2ebe380;
+  --color-text-op-60: #f2ebe399;
+  --color-text-dark: #464452;
+  /* border */
+  --color-border: #464452;
+  /* body */
+  --color-body: #211d28;
+  /* forms */
+  --form-element-border: var(--color-border);
+  --form-element-bg: #f2ebe3;
+  --form-text-placeholder: #a9a29e;
+  /* buttons */
+  --btn-primary-bg: #f2ebe3;
+  --btn-primary-border: #18151e;
+  --btn-primary-label: #f2ebe3;
+  --dark-btn-primary-label: #f2ebe3;
+  --dark-btn-primary-bg: #18151e;
+  --btn-basic-label: #18151e;
+  --btn-basic-bg: #f2ebe3;
+  --btn-basic-border: #18151e;
+  --btn-disabled-label: var(--color-black-op-60);
+  --btn-disabled-bg: #a9a29e;
+  --btn-disabled-border: var(--color-black-op-60);
+  /* icons */
+  --color-icon-primary: #a9a29e;
+  --color-icon-secondary: inherit;
+}
+
 .container-wide {
   width: calc(100% - 20px);
   max-width: 2360px;
@@ -324,6 +377,59 @@ $:
   color: #f5f5f5;
 }
 
+:root {
+  --color-white-op-20: rgba(255, 255, 255, 0.2);
+  --color-white-op-30: rgba(255, 255, 255, 0.3);
+  --color-black-op-20: rgba(0, 0, 0, 0.2);
+  --color-black-op-40: rgba(0, 0, 0, 0.4);
+  --color-black-op-60: rgba(0, 0, 0, 0.6);
+  --color-dark-blue-op-30: #211d284d;
+  /* semantic colors */
+  --color-primary-light: #82eec7;
+  --color-primary: #00d692;
+  --color-primary-bg: #00d69280;
+  --color-primary-dark: #00a873;
+  --color-secondary-light: #ffffff;
+  --color-secondary: #f2ebe3;
+  --color-secondary-dark: #a9a29e;
+  /* feedback */
+  --color-success: #00d692;
+  --color-success-bg: #00d69280;
+  --color-danger: #ff504d;
+  --color-danger-bg: #ff504d80;
+  --color-warning: #ffe032;
+  --color-warning-bg: #ffe03280;
+  /* typography */
+  --color-text-light: #ffffff;
+  --color-text: #f2ebe3;
+  --color-text-op-50: #f2ebe380;
+  --color-text-op-60: #f2ebe399;
+  --color-text-dark: #464452;
+  /* border */
+  --color-border: #464452;
+  /* body */
+  --color-body: #211d28;
+  /* forms */
+  --form-element-border: var(--color-border);
+  --form-element-bg: #f2ebe3;
+  --form-text-placeholder: #a9a29e;
+  /* buttons */
+  --btn-primary-bg: #f2ebe3;
+  --btn-primary-border: #18151e;
+  --btn-primary-label: #f2ebe3;
+  --dark-btn-primary-label: #f2ebe3;
+  --dark-btn-primary-bg: #18151e;
+  --btn-basic-label: #18151e;
+  --btn-basic-bg: #f2ebe3;
+  --btn-basic-border: #18151e;
+  --btn-disabled-label: var(--color-black-op-60);
+  --btn-disabled-bg: #a9a29e;
+  --btn-disabled-border: var(--color-black-op-60);
+  /* icons */
+  --color-icon-primary: #a9a29e;
+  --color-icon-secondary: inherit;
+}
+
 .container-wide {
   width: calc(100% - 20px);
   max-width: 2360px;
@@ -510,35 +616,35 @@ $:
   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;
+  margin: 1em 0;
   position: relative;
   text-transform: uppercase;
   border-radius: 0.3em;
 }
 
 .iroco-ui-button--basic {
-  background: #f2ebe3;
-  border: 1px solid #18151e;
+  color: var(--btn-basic-label);
+  background: var(--btn-basic-bg);
+  border: 1px solid var(--btn-basic-border);
 }
 
 .iroco-ui-button--dark {
-  background: #18151e;
-  color: #f2ebe3;
+  background: var(--dark-btn-primary-bg);
+  color: var(--dark-btn-primary-label);
 }
 
 .iroco-ui-button--success {
-  background: #00d692;
-  color: #18151e;
+  background: var(--color-success);
+  color: var(--btn-secondary-label);
 }
 
 .iroco-ui-button--danger {
-  background: #ff504d;
+  background: var(--color-danger);
 }
 
 .iroco-ui-button--regular {
@@ -550,23 +656,25 @@ $:
 }
 
 .iroco-ui-button--basic:hover, .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
-  box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 0 0 10em var(--color-black-op-20);
 }
 
 .iroco-ui-button--dark:hover {
-  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2);
+  box-shadow: inset 0 0 0 10em var(--color-white-op-20);
 }
 
 .iroco-ui-button:active {
   box-shadow: none;
 }
 
-.iroco-ui-button.disabled {
-  background-color: #f5f5f5;
+.iroco-ui-button.disabled, .iroco-ui-button:disabled {
+  background-color: var(--btn-disabled-bg);
+  color: var(--btn-disabled-label);
+  border-color: var(--btn-disabled-border);
   cursor: default;
 }
 
-.iroco-ui-button.disabled:hover {
+.iroco-ui-button.disabled:hover, .iroco-ui-button:disabled:hover {
   box-shadow: none;
 }
 
@@ -574,7 +682,7 @@ $:
   background: none;
   border: none;
   font-family: "Arial";
-  color: #f2ebe3;
+  color: var(--color-text);
   cursor: pointer;
 }
 
@@ -606,7 +714,7 @@ $:
 
 .nav__sidebar__item {
   padding: 2em;
-  border-top: 1px solid #464452;
+  border-top: 1px solid var(--color-border);
 }
 
 .nav__sidebar__item:first-child {
@@ -614,8 +722,8 @@ $:
 }
 
 .nav__sidebar .active {
-  border-top: 1px solid #00d692;
-  border-bottom: 1px solid #00d692;
+  border-top: 1px solid var(--color-primary);
+  border-bottom: 1px solid var(--color-primary);
 }
 
 .nav__topbar {
@@ -636,19 +744,19 @@ $:
 }
 
 .nav__topbar .active {
-  border-bottom: 1px solid #00d692;
+  border-bottom: 1px solid var(--color-primary);
 }
 
 .nav__version {
   margin-top: auto;
   padding-left: 2em;
-  color: #464452;
+  color: var(--color-text-dark);
 }
 
 @media all and (max-width: 768px) {
   .nav__sidebar, .nav__topbar {
     position: fixed;
-    background-color: #211d28;
+    background-color: var(--color-body);
     top: 0;
     right: 0;
     width: 100%;
@@ -673,21 +781,21 @@ $:
     top: 0;
     background-color: transparent;
     border: none;
-    color: #a9a29e;
+    color: var(--color-icon-primary);
   }
   .nav__sidebar {
     top: 0;
     left: 0;
   }
   .nav__sidebar__item:first-child {
-    border-top: 1px solid #464452;
+    border-top: 1px solid var(--color-border);
   }
   .nav__topbar {
     height: 100%;
   }
   .nav__topbar__item {
     padding: 2em;
-    border-top: 1px solid #464452;
+    border-top: 1px solid var(--color-border);
   }
   .nav__version {
     display: none;

package/dist/Navigation.stories.svelte

@@ -1,6 +1,6 @@
 <script context="module">
 	import Navigation from './Navigation.svelte';
-	import { NavigationItem } from './definition';
+	import { NavigationItem, NavigationItemType } from './definition';
 
 	export const meta = {
 		title: 'Navigation',
@@ -21,12 +21,6 @@
 			}
 
 		},
-		args: {
-			navigationItems: [
-				new NavigationItem('About', `/about`),
-				new NavigationItem('Foo', `/foo`),
-				new NavigationItem('Bar', `/bar`)]
-		}
 	};
 </script>
 
@@ -37,9 +31,13 @@
 <Template let:args>
 	<Navigation {...args}
 							navigationItems={[
-							new NavigationItem('About', `/about`),
-	new NavigationItem('Foo', `/foo`),
-	new NavigationItem('Bar', `/bar`)]}>
+								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>

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

@@ -32,9 +32,6 @@ export namespace meta {
             export { control_3 as control };
         }
     }
-    export namespace args {
-        let navigationItems: NavigationItem[];
-    }
 }
 /** @typedef {typeof __propDef.props}  NavigationProps */
 /** @typedef {typeof __propDef.events}  NavigationEvents */
@@ -49,7 +46,6 @@ export type NavigationProps = typeof __propDef.props;
 export type NavigationEvents = typeof __propDef.events;
 export type NavigationSlots = typeof __propDef.slots;
 import Navigation from './Navigation.svelte';
-import { NavigationItem } from './definition';
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {

package/dist/Navigation.svelte

@@ -94,6 +94,59 @@ let showMenu = false;
   color: #f5f5f5;
 }
 
+:root {
+  --color-white-op-20: rgba(255, 255, 255, 0.2);
+  --color-white-op-30: rgba(255, 255, 255, 0.3);
+  --color-black-op-20: rgba(0, 0, 0, 0.2);
+  --color-black-op-40: rgba(0, 0, 0, 0.4);
+  --color-black-op-60: rgba(0, 0, 0, 0.6);
+  --color-dark-blue-op-30: #211d284d;
+  /* semantic colors */
+  --color-primary-light: #82eec7;
+  --color-primary: #00d692;
+  --color-primary-bg: #00d69280;
+  --color-primary-dark: #00a873;
+  --color-secondary-light: #ffffff;
+  --color-secondary: #f2ebe3;
+  --color-secondary-dark: #a9a29e;
+  /* feedback */
+  --color-success: #00d692;
+  --color-success-bg: #00d69280;
+  --color-danger: #ff504d;
+  --color-danger-bg: #ff504d80;
+  --color-warning: #ffe032;
+  --color-warning-bg: #ffe03280;
+  /* typography */
+  --color-text-light: #ffffff;
+  --color-text: #f2ebe3;
+  --color-text-op-50: #f2ebe380;
+  --color-text-op-60: #f2ebe399;
+  --color-text-dark: #464452;
+  /* border */
+  --color-border: #464452;
+  /* body */
+  --color-body: #211d28;
+  /* forms */
+  --form-element-border: var(--color-border);
+  --form-element-bg: #f2ebe3;
+  --form-text-placeholder: #a9a29e;
+  /* buttons */
+  --btn-primary-bg: #f2ebe3;
+  --btn-primary-border: #18151e;
+  --btn-primary-label: #f2ebe3;
+  --dark-btn-primary-label: #f2ebe3;
+  --dark-btn-primary-bg: #18151e;
+  --btn-basic-label: #18151e;
+  --btn-basic-bg: #f2ebe3;
+  --btn-basic-border: #18151e;
+  --btn-disabled-label: var(--color-black-op-60);
+  --btn-disabled-bg: #a9a29e;
+  --btn-disabled-border: var(--color-black-op-60);
+  /* icons */
+  --color-icon-primary: #a9a29e;
+  --color-icon-secondary: inherit;
+}
+
 .container-wide {
   width: calc(100% - 20px);
   max-width: 2360px;
@@ -301,7 +354,7 @@ let showMenu = false;
 @media all and (max-width: 768px) {
   .navigation {
     display: none;
-    color: #f2ebe3;
+    color: var(--color-text);
   }
   .navigation--mobile {
     display: flex;
@@ -311,7 +364,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 +372,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;
@@ -331,5 +384,5 @@ let showMenu = false;
 }
 
 .navigation__title-link, .navigation-mobile__title-link {
-  color: white;
+  color: var(--color-text-light);
 }</style>

package/dist/NumberInput.stories.svelte

@@ -0,0 +1,50 @@
+<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}>
+		</NumberInput>
+	</form>
+</Template>
+
+<Story name="Default"></Story>
+<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

@@ -61,6 +61,59 @@ export let max;
   color: #f5f5f5;
 }
 
+:root {
+  --color-white-op-20: rgba(255, 255, 255, 0.2);
+  --color-white-op-30: rgba(255, 255, 255, 0.3);
+  --color-black-op-20: rgba(0, 0, 0, 0.2);
+  --color-black-op-40: rgba(0, 0, 0, 0.4);
+  --color-black-op-60: rgba(0, 0, 0, 0.6);
+  --color-dark-blue-op-30: #211d284d;
+  /* semantic colors */
+  --color-primary-light: #82eec7;
+  --color-primary: #00d692;
+  --color-primary-bg: #00d69280;
+  --color-primary-dark: #00a873;
+  --color-secondary-light: #ffffff;
+  --color-secondary: #f2ebe3;
+  --color-secondary-dark: #a9a29e;
+  /* feedback */
+  --color-success: #00d692;
+  --color-success-bg: #00d69280;
+  --color-danger: #ff504d;
+  --color-danger-bg: #ff504d80;
+  --color-warning: #ffe032;
+  --color-warning-bg: #ffe03280;
+  /* typography */
+  --color-text-light: #ffffff;
+  --color-text: #f2ebe3;
+  --color-text-op-50: #f2ebe380;
+  --color-text-op-60: #f2ebe399;
+  --color-text-dark: #464452;
+  /* border */
+  --color-border: #464452;
+  /* body */
+  --color-body: #211d28;
+  /* forms */
+  --form-element-border: var(--color-border);
+  --form-element-bg: #f2ebe3;
+  --form-text-placeholder: #a9a29e;
+  /* buttons */
+  --btn-primary-bg: #f2ebe3;
+  --btn-primary-border: #18151e;
+  --btn-primary-label: #f2ebe3;
+  --dark-btn-primary-label: #f2ebe3;
+  --dark-btn-primary-bg: #18151e;
+  --btn-basic-label: #18151e;
+  --btn-basic-bg: #f2ebe3;
+  --btn-basic-border: #18151e;
+  --btn-disabled-label: var(--color-black-op-60);
+  --btn-disabled-bg: #a9a29e;
+  --btn-disabled-border: var(--color-black-op-60);
+  /* icons */
+  --color-icon-primary: #a9a29e;
+  --color-icon-secondary: inherit;
+}
+
 .iroco-ui-form input,
 .iroco-ui-form textarea {
   outline: none;
@@ -72,9 +125,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 +135,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 +160,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,53 @@
+<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={group}
+								 name="name-hello"
+								 value="hello" {...args}>
+			Hello
+		</RadioButton>
+		<RadioButton bind:group={group}
+								 name="name-foo"
+								 value="foo" >
+			Foo
+		</RadioButton>
+		<RadioButton bind:group={group}
+								 name="name-bar"
+								 value="bar" >
+			Bar
+		</RadioButton>
+	</form>
+	Selected group : {group}
+</Template>
+
+<Story name="Default"></Story>