@iroco/ui 1.0.0-3 → 1.0.0-5

package/dist/TextInput.stories.svelte

@@ -0,0 +1,77 @@
+<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

@@ -47,51 +47,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 +65,9 @@ textarea:focus {
   flex-direction: column;
 }
 .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;
@@ -119,23 +75,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/scss/button.scss

@@ -1,4 +1,4 @@
-@use './colors';
+//@use './colors';
 @use './fonts';
 @use './containers';
 @use './constants';
@@ -7,35 +7,34 @@
 	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 {
-		color: colors.$buttonSecondaryLabel;
-		background: colors.$buttonSecondaryBackground;
-		border: 1px solid colors.$buttonSecondaryBorder;
+		color: var(--btn-basic-label);
+		background: var(--btn-basic-bg);
+		border: 1px solid var(--btn-basic-border);
 	}
 
 	&--dark {
-		background: colors.$buttonPrimaryBackgroundDark;
-		color: colors.$buttonPrimaryLabelDark;
+		background: var(--dark-btn-primary-bg);
+		color: var(--dark-btn-primary-label);
 	}
 
 	&--success {
-		background: colors.$success;
-		color: colors.$nightBlue;
+		background: var(--color-success);
+		color: var(--btn-secondary-label);
 	}
 
 	&--danger {
-		background: colors.$danger;
+		background: var(--color-danger);
 	}
 
 	&--regular {
@@ -49,21 +48,22 @@
 	&--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.$buttonDisabledBackground;
-		color: colors.$buttonDisabledLabel;
-		border-color: colors.$buttonDisabledBorder;
+	&.disabled,
+	&:disabled {
+		background-color: var(--btn-disabled-bg);
+		color: var(--btn-disabled-label);
+		border-color: var(--btn-disabled-border);
 		cursor: default;
 
 		&:hover {
@@ -76,6 +76,6 @@
 	background: none;
 	border: none;
 	font-family: fonts.$arial;
-	color: colors.$text;
+	color: var(--color-text);
 	cursor: pointer;
 }

package/dist/scss/colors.scss

@@ -1,92 +1,69 @@
-// Declarative colors
-
-$blue: #00b9ff;
-$darkBlue: #211d28;
-$nightBlue: #18151e;
-$green: #00d692;
-$red: #ff504d;
-$yellow: #ffe032;
-$white: #ffffff;
-$beige: #f2ebe3;
-$darkBeige: #a9a29e;
-$mediumGrey: #464452;
-$darkGrey: #33323a;
-$lightGrey: #f5f5f5;
-
-.font-color-blue {
-	color: $blue;
-}
-
-.font-color-darkBlue {
-	color: $darkBlue;
-}
-
-.font-color-nightBlue {
-	color: $nightBlue;
-}
-
-.font-color-green {
-	color: $green;
-}
-
-.font-color-red {
-	color: $red;
-}
-
-.font-color-yellow {
-	color: $yellow;
-}
-
-.font-color-beige {
-	color: $beige;
-}
-
-.font-color-darkBeige {
-	color: $darkBeige;
+// Import this file for Iroco colors
+// Create your own theme by duplicating this one and importing it globally
+
+: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;
 }
-
-.font-color-mediumGrey {
-	color: $mediumGrey;
-}
-
-.font-color-darkGrey {
-	color: $darkGrey;
-}
-
-.font-color-lightGrey {
-	color: $lightGrey;
-}
-
-// Semantic colors
-
-$primary: $green;
-
-$success: $green;
-$danger: $red;
-$warning: $yellow;
-
-$background: $darkBlue;
-$text: $beige;
-$textLight: $white;
-
-$iconPrimary: $darkBeige;
-$border: $mediumGrey;
-
-$formElementBackground: $beige;
-$formElementBorder: $beige;
-$formTextPlaceholder: $beige;
-
-$buttonPrimaryLabel: $beige;
-$buttonPrimaryBackground: $primary;
-$buttonPrimaryBorder: $nightBlue;
-
-$buttonPrimaryBackgroundDark: $nightBlue;
-$buttonPrimaryLabelDark: $beige;
-
-$buttonSecondaryLabel: $nightBlue;
-$buttonSecondaryBackground: $beige;
-$buttonSecondaryBorder: $nightBlue;
-
-$buttonDisabledLabel: $darkGrey;
-$buttonDisabledBackground: $darkBeige;
-$buttonDisabledBorder: $mediumGrey;

package/dist/scss/fields/_checkbox.scss

@@ -5,7 +5,7 @@
 		justify-content: flex-start;
 
 		> label {
-			@include Arial(0.9em, $blue, bold);
+			@include Arial(0.9em, #00b9ff /*$blue*/, bold);
 			letter-spacing: 0.05em;
 			text-transform: uppercase;
 			display: inline-block;
@@ -26,14 +26,14 @@
 		margin-top: 15px;
 
 		> span {
-			@include Arial(0.9em, $red);
+			@include Arial(0.9em, var(--color-danger) /* red */);
 			margin-left: 10px;
 		}
 	}
 
 	> .warning {
 		> span {
-			color: $blue;
+			color: #00b9ff /*$blue*/;
 		}
 	}
 }

package/dist/scss/fields/_input.scss

@@ -1,4 +1,4 @@
-@use './../colors';
+//@use './../colors';
 .ui-fields-input {
 	width: 100%;
 	transition: width linear 100ms;
@@ -37,7 +37,7 @@
 			left: 0;
 			width: 0;
 			height: 3px;
-			background: colors.$green;
+			background: var(--color-primary);
 			transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
 		}
 
@@ -46,7 +46,7 @@
 		}
 
 		> input {
-			@include Arial(1em, colors.$darkBlue);
+			@include Arial(1em, #211d28); /* $darkBlue */
 			flex: 1;
 			padding: 10px 15px;
 			text-overflow: ellipsis;
@@ -54,7 +54,7 @@
 			overflow: hidden;
 
 			&::placeholder {
-				color: rgba(colors.$darkBlue, 0.3);
+				color: var(--color-dark-blue-op-30);
 				font-style: italic;
 			}
 		}
@@ -78,12 +78,11 @@
 				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;
 				flex-shrink: 0;
-				border-top: solid colors.$beige 1px;
+				border-top: solid #f2ebe3 /*colors.$beige*/ 1px;
 				background: white;
 				transition: background linear 100ms;
 
@@ -93,14 +92,14 @@
 
 				&:hover,
 				&.selected {
-					background: colors.$lightGrey;
+					background: #f5f5f5 /*lighGrey*/;
 				}
 			}
 		}
 	}
 
 	> .instructions {
-		@include Arial(1em, colors.$darkBeige);
+		@include Arial(1em, var(--color-secondary-dark) /*$darkBeige*/);
 		margin-top: 10px;
 	}
 
@@ -112,14 +111,14 @@
 		margin-top: 15px;
 
 		> span {
-			@include Arial(0.9em, colors.$red);
+			@include Arial(0.9em, var(--color-danger) /*$red*/);
 			margin-left: 10px;
 		}
 	}
 
 	> .warning {
 		> span {
-			color: colors.$blue;
+			color: #00b9ff /*$blue*/;
 		}
 	}
 
@@ -138,13 +137,13 @@
 
 	&.dark {
 		> .container {
-			background: colors.$background;
+			background: var(--color-body);
 
 			> input {
 				padding: 15px 20px;
 
 				&::placeholder {
-					color: rgba(white, 0.3);
+					color: var(--color-white-op-30);
 				}
 			}
 		}

package/dist/scss/forms.scss

@@ -1,4 +1,4 @@
-@use 'colors';
+//@use 'colors';
 
 .iroco-ui-form {
 	input,
@@ -12,9 +12,9 @@
 		display: flex;
 		flex-direction: column;
 		> input {
-			color: colors.$beige;
-			background: colors.$background;
-			border: 1px solid colors.$border;
+			color: var(--color-text);
+			background: var(--color-body);
+			border: 1px solid var(--color-border);
 			padding: 1em 1.5em;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -22,10 +22,10 @@
 			border-radius: 0.5em;
 
 			&::placeholder {
-				color: rgba(colors.$beige, 0.5);
+				color: var(--color-text-op-50);
 			}
 			&.error {
-				border-color: colors.$red;
+				border-color: var(--color-danger);
 			}
 			&.readonlyInput {
 				cursor: not-allowed;
@@ -34,7 +34,7 @@
 	}
 
 	.iroco-ui-label {
-		color: rgba(colors.$beige, 0.6);
+		color: var(--color-text-op-60);
 		font-weight: bold;
 		padding-bottom: 10px;
 		display: inline-block;
@@ -54,6 +54,6 @@
 
 	p.error {
 		margin: 0;
-		color: colors.$red;
+		color: var(--color-danger);
 	}
 }

package/dist/scss/style.scss

@@ -1,4 +1,4 @@
-@use 'colors';
+//@use 'colors';
 @use 'containers';
 @use 'fonts';
 @use 'forms';