@iroco/ui 1.0.0-4 → 1.0.0-5

package/dist/Navigation.stories.svelte

@@ -19,8 +19,7 @@
 			color: {
 				control: { type: 'color' }
 			}
-
-		},
+		}
 	};
 </script>
 
@@ -29,21 +28,21 @@
 </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>
+	<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)
+		]}
+	/>
 </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>
+<Story name="Title" args={{ title: 'Alternative title' }} />
+<Story name="Color" args={{ color: '#ABCDEF' }} />

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,165 +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;
-}
-
-: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 {
+<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;
@@ -216,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;
@@ -266,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;
@@ -310,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;
@@ -336,21 +210,17 @@ 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;
@@ -382,7 +252,7 @@ let showMenu = false;
     padding-left: 0.5em;
   }
 }
-
-.navigation__title-link, .navigation-mobile__title-link {
+.navigation__title-link,
+.navigation-mobile__title-link {
   color: var(--color-text-light);
 }</style>

package/dist/NumberInput.stories.svelte

@@ -1,5 +1,4 @@
 <script context="module">
-
 	import { NumberInput } from './index';
 
 	export const meta = {
@@ -27,7 +26,6 @@
 			max: {
 				control: { type: 'number' }
 			}
-
 		}
 	};
 </script>
@@ -38,13 +36,12 @@
 
 <Template let:args>
 	<form class="iroco-ui-form">
-		<NumberInput {...args}>
-		</NumberInput>
+		<NumberInput {...args} />
 	</form>
 </Template>
 
-<Story name="Default"></Story>
+<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 }} />
+<Story name="Min / Max" args={{ min: 0, max: 10, value: 5 }} />

package/dist/NumberInput.svelte

@@ -17,104 +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;
-}
-
-: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,
+<style>.iroco-ui-form input,
 .iroco-ui-form textarea {
   outline: none;
   text-decoration: none;

package/dist/RadioButton.stories.svelte

@@ -1,5 +1,4 @@
 <script context="module">
-
 	import { RadioButton } from './index';
 
 	export const meta = {
@@ -18,7 +17,6 @@
 			checked: {
 				control: { type: 'boolean' }
 			}
-
 		}
 	};
 </script>
@@ -31,23 +29,11 @@
 
 <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>
+		<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"></Story>
+<Story name="Default" />

package/dist/RadioButton.svelte

@@ -15,104 +15,7 @@ $:
 	<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;
-}
-
-: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-radio {
+<style>.iroco-ui-radio {
   color: var(--color-text);
   position: relative;
   margin-top: 0.5em;

package/dist/TextInput.stories.svelte

@@ -1,6 +1,4 @@
 <script context="module">
-
-
 	import { TextInput } from './index';
 
 	export const meta = {
@@ -50,17 +48,15 @@
 
 <script>
 	import { Story, Template } from '@storybook/addon-svelte-csf';
-
-	let group = 'bar';
 </script>
 
 <Template let:args>
 	<form class="iroco-ui-form">
-		<TextInput {...args}></TextInput>
+		<TextInput {...args} />
 	</form>
 </Template>
 
-<Story name="Default"></Story>
+<Story name="Default" />
 <Story name="Text" args={{ type: 'text' }} />
 <Story name="Email" args={{ type: 'email' }} />
 <Story name="Password" args={{ type: 'password' }} />
@@ -68,8 +64,14 @@
 <Story name="Error" args={{ error: 'An error message' }} />
 <Story name="Placeholder" args={{ placeholder: 'A placeholder' }} />
 <Story name="Border" args={{ placeholder: 'A placeholder' }} />
-<Story name="Html Error" args={{error:`<details>
+<Story
+	name="Html Error"
+	args={{
+		error: `<details>
   <summary>HTML error</summary>
   <p>Foo bar</p>
-</details>`, htmlError: true }} />
-<Story name="Autocomplete" args={{ type:'text',autocomplete: 'name' }} />
+</details>`,
+		htmlError: true
+	}}
+/>
+<Story name="Autocomplete" args={{ type: 'text', autocomplete: 'name' }} />