@iroco/ui 1.0.0-1 → 1.0.0-10

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 {};

package/dist/TextInput.stories.svelte

@@ -0,0 +1,78 @@
+<script context="module">
+	import { TextInput } from './index';
+
+	export const meta = {
+		title: 'Iroco-UI/Form/TextInput',
+		component: TextInput,
+		argTypes: {
+			id: {
+				control: { type: 'text' }
+			},
+			type: {
+				control: { type: 'select' },
+				options: ['text', 'email', 'password']
+			},
+			name: {
+				control: { type: 'text' }
+			},
+			label: {
+				control: { type: 'text' }
+			},
+			placeholder: {
+				control: { type: 'text' }
+			},
+			error: {
+				control: { type: 'text' }
+			},
+			htmlError: {
+				control: { type: 'text' }
+			},
+			value: {
+				control: { type: 'number' }
+			},
+			readonly: {
+				control: { type: 'boolean' }
+			},
+			border: {
+				control: { type: 'boolean' }
+			},
+			autocomplete: {
+				control: { type: 'text' }
+			}
+		},
+		args: {
+			type: 'text'
+		}
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+	<form class="iroco-ui-form">
+		<TextInput {...args} />
+	</form>
+
+</Template>
+
+<Story name="Default" />
+<Story name="Text" args={{ type: 'text' }} />
+<Story name="Email" args={{ type: 'email' }} />
+<Story name="Password" args={{ type: 'password' }} />
+<Story name="Label" args={{ label: 'Label' }} />
+<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>
+  <summary>HTML error</summary>
+  <p>Foo bar</p>
+</details>`,
+		htmlError: true
+	}}
+/>
+<Story name="Autocomplete" args={{ type: 'text', autocomplete: 'name' }} />

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

@@ -0,0 +1,111 @@
+export namespace meta {
+    export let title: string;
+    export { TextInput as component };
+    export namespace argTypes {
+        export namespace id {
+            namespace control {
+                let type: string;
+            }
+        }
+        export namespace type_1 {
+            export namespace control_1 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_1 as control };
+            export let options: string[];
+        }
+        export { type_1 as type };
+        export namespace name {
+            export namespace control_2 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_2 as control };
+        }
+        export namespace label {
+            export namespace control_3 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_3 as control };
+        }
+        export namespace placeholder {
+            export namespace control_4 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_4 as control };
+        }
+        export namespace error {
+            export namespace control_5 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_5 as control };
+        }
+        export namespace htmlError {
+            export namespace control_6 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_6 as control };
+        }
+        export namespace value {
+            export namespace control_7 {
+                let type_8: string;
+                export { type_8 as type };
+            }
+            export { control_7 as control };
+        }
+        export namespace readonly {
+            export namespace control_8 {
+                let type_9: string;
+                export { type_9 as type };
+            }
+            export { control_8 as control };
+        }
+        export namespace border {
+            export namespace control_9 {
+                let type_10: string;
+                export { type_10 as type };
+            }
+            export { control_9 as control };
+        }
+        export namespace autocomplete {
+            export namespace control_10 {
+                let type_11: string;
+                export { type_11 as type };
+            }
+            export { control_10 as control };
+        }
+    }
+    export namespace args {
+        let type_12: string;
+        export { type_12 as type };
+    }
+}
+/** @typedef {typeof __propDef.props}  TextInputProps */
+/** @typedef {typeof __propDef.events}  TextInputEvents */
+/** @typedef {typeof __propDef.slots}  TextInputSlots */
+export default class TextInput extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TextInputProps = typeof __propDef.props;
+export type TextInputEvents = typeof __propDef.events;
+export type TextInputSlots = typeof __propDef.slots;
+import { TextInput } from './index';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/TextInput.svelte

@@ -1,13 +1,14 @@
-<script>export let id;
-export let type;
+<script>import {} from "./definition";
+export let id;
+export let type = TextInputType.text;
 export let name;
-export let label = null;
-export let placeholder;
-export let error = null;
+export let label = void 0;
+export let placeholder = void 0;
+export let error = void 0;
 export let htmlError = false;
-export let value = null;
-export let onFocus;
-export let onBlur;
+export let value = void 0;
+export let onFocus = void 0;
+export let onBlur = void 0;
 export let readonly = false;
 export let border = false;
 export let autocomplete = "on";
@@ -47,51 +48,7 @@ function typeAction(node) {
 	{/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;
-}
-
-input,
+<style>input,
 textarea {
   outline: none;
   text-decoration: none;
@@ -109,9 +66,9 @@ textarea:focus {
   flex-direction: column;
 }
 .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;
@@ -119,23 +76,23 @@ textarea:focus {
   border-radius: 0.3em;
 }
 .iroco-ui-input > input.border {
-  border: 1px solid #f2ebe3;
+  border: 1px solid var(--form-element-border);
 }
 .iroco-ui-input > input::placeholder {
-  color: rgba(242, 235, 227, 0.5);
+  color: var(--color-text-op-50);
 }
 .iroco-ui-input > input.error {
-  border-color: #ff504d;
+  border-color: var(--color-danger);
 }
 .iroco-ui-input > input.readonlyInput {
   cursor: not-allowed;
 }
 .iroco-ui-input .error {
-  color: #ff504d;
+  color: var(--color-danger);
 }
 
 .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;

package/dist/TextInput.svelte.d.ts

@@ -1,17 +1,17 @@
 import { SvelteComponent } from "svelte";
-import type { TextInputType } from './definition';
+import { type TextInputType } from './definition';
 declare const __propDef: {
     props: {
         id: string;
-        type: TextInputType;
+        type?: TextInputType | undefined;
         name: string;
-        label?: string | null | undefined;
-        placeholder: string | undefined;
-        error?: string | null | undefined;
+        label?: string | undefined;
+        placeholder?: string | undefined;
+        error?: string | undefined;
         htmlError?: boolean | undefined;
-        value?: string | null | undefined;
-        onFocus: (e: FocusEvent) => void | null;
-        onBlur: (e: Event) => void | null;
+        value?: string | undefined;
+        onFocus?: ((e: FocusEvent) => void) | undefined;
+        onBlur?: ((e: Event) => void) | undefined;
         readonly?: boolean | undefined;
         border?: boolean | undefined;
         autocomplete?: string | undefined;

package/dist/definition.d.ts

@@ -1,3 +1,8 @@
+export declare class ButtonModel {
+    href: string;
+    label: string;
+    constructor(href: string, label: string);
+}
 export declare class NavigationItem {
     hrefOrCallback: string | (() => void);
     name: string;

package/dist/definition.js

@@ -1,3 +1,11 @@
+export class ButtonModel {
+    href;
+    label;
+    constructor(href, label) {
+        this.href = href;
+        this.label = label;
+    }
+}
 export class NavigationItem {
     hrefOrCallback;
     name;

package/dist/scss/button.scss

@@ -1,4 +1,4 @@
-@use './colors';
+//@use './colors';
 @use './fonts';
 @use './containers';
 @use './constants';
@@ -7,35 +7,40 @@
 	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: constants.$border-radius;
 
 	&--basic {
-		background: colors.$beige;
-		border: 1px solid colors.$nightBlue;
+		color: var(--btn-basic-label);
+		background: var(--btn-basic-bg);
+		border: 1px solid var(--btn-basic-border);
 	}
+
 	&--dark {
-		background: colors.$nightBlue;
-		color: colors.$beige;
+		background: var(--dark-btn-primary-bg);
+		color: var(--dark-btn-primary-label);
 	}
+
 	&--success {
-		background: colors.$green;
-		color: colors.$nightBlue;
+		background: var(--color-success);
+		color: var(--btn-secondary-label);
 	}
+
 	&--danger {
-		background: colors.$red;
+		background: var(--color-danger);
 	}
+
 	&--regular {
 		padding: 1em 2em;
 	}
+
 	&--small {
 		padding: 0.5em 1em;
 	}
@@ -43,19 +48,24 @@
 	&--basic:hover,
 	&--success:hover,
 	&--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);
 	}
+
 	&--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);
 	}
 
 	&:active {
 		box-shadow: none;
 	}
 
-	&.disabled {
-		background-color: colors.$lightGrey;
+	&.disabled,
+	&:disabled {
+		background-color: var(--btn-disabled-bg);
+		color: var(--btn-disabled-label);
+		border-color: var(--btn-disabled-border);
 		cursor: default;
+
 		&:hover {
 			box-shadow: none;
 		}
@@ -66,6 +76,6 @@
 	background: none;
 	border: none;
 	font-family: fonts.$arial;
-	color: colors.$beige;
+	color: var(--color-text);
 	cursor: pointer;
 }