@iroco/ui 1.0.0-2 → 1.0.0-4

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;
@@ -60,8 +59,61 @@ $:
   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 {
-  color: #f2ebe3;
+  color: var(--color-text);
   position: relative;
   margin-top: 0.5em;
   padding-left: 1.5em;
@@ -84,10 +136,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,75 @@
+<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';
+
+	let group = 'bar';
+</script>
+
+<Template let:args>
+	<form class="iroco-ui-form">
+		<TextInput {...args}></TextInput>
+	</form>
+</Template>
+
+<Story name="Default"></Story>
+<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

@@ -91,6 +91,59 @@ function typeAction(node) {
   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;
+}
+
 input,
 textarea {
   outline: none;
@@ -109,9 +162,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 +172,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

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

package/dist/scss/colors.scss

@@ -1,9 +1,14 @@
+// Declarative colors
+
 $blue: #00b9ff;
 $darkBlue: #211d28;
 $nightBlue: #18151e;
+$greenLight: #82eec7;
 $green: #00d692;
+$greenDark: #00a873;
 $red: #ff504d;
 $yellow: #ffe032;
+$white: #ffffff;
 $beige: #f2ebe3;
 $darkBeige: #a9a29e;
 $mediumGrey: #464452;
@@ -13,33 +18,110 @@ $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;
 }
+
 .font-color-mediumGrey {
 	color: $mediumGrey;
 }
+
 .font-color-darkGrey {
 	color: $darkGrey;
 }
+
 .font-color-lightGrey {
 	color: $lightGrey;
 }
+
+: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;
+}