@iroco/ui 1.0.0-3 → 1.0.0-4

package/dist/Alert.stories.svelte

@@ -0,0 +1,31 @@
+<script context="module">
+	import Alert from './Alert.svelte';
+
+	export const meta = {
+		title: 'Iroco-UI/Atoms/Alert',
+		component: Alert,
+		argTypes: {
+			type: {
+				control: { type: 'select' },
+				options: ['success', 'danger', 'flash']
+			}
+		}
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+	<Alert {...args}>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+		et dolore magna aliqua. Ut porttitor leo a diam. Gravida dictum fusce ut placerat orci nulla. Pulvinar sapien et
+		ligula ullamcorper. Ultrices neque ornare aenean euismod. Facilisi cras fermentum odio eu feugiat pretium.
+	</Alert>
+</Template>
+
+<Story name="Default"></Story>
+<Story name="Danger" args={{ type: 'danger' }} />
+<Story name="Success" args={{ type: 'success' }} />
+<Story name="Flash" args={{ type: 'flash' }} />

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

@@ -0,0 +1,37 @@
+export namespace meta {
+    export let title: string;
+    export { Alert as component };
+    export namespace argTypes {
+        namespace type {
+            namespace control {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            let options: string[];
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  AlertProps */
+/** @typedef {typeof __propDef.events}  AlertEvents */
+/** @typedef {typeof __propDef.slots}  AlertSlots */
+export default class Alert extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+import Alert from './Alert.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/Alert.svelte

@@ -54,6 +54,59 @@ export let callback;
   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;
+}
+
 .alert {
   flex-direction: column;
   position: relative;
@@ -67,16 +120,16 @@ export let callback;
   margin-bottom: 1em;
 }
 .alert--danger {
-  background-color: rgba(255, 80, 77, 0.5);
-  border: 1px solid #ff504d;
+  background-color: var(--color-danger-bg);
+  border: 1px solid var(--color-danger);
 }
 .alert--success {
-  background-color: rgba(0, 214, 146, 0.5);
-  border: 1px solid #00d692;
+  background-color: var(--color-success-bg);
+  border: 1px solid var(--color-success);
 }
 .alert--flash {
-  background-color: rgba(255, 224, 50, 0.5);
-  border: 1px solid #ffe032;
+  background-color: var(--color-warning-bg);
+  border: 1px solid var(--color-warning);
 }
 .alert__close {
   display: block;
@@ -86,5 +139,5 @@ export let callback;
   background-color: transparent;
   border: none;
   cursor: pointer;
-  color: #a9a29e;
+  color: var(--color-icon-primary);
 }</style>

package/dist/Button.stories.svelte

@@ -2,7 +2,7 @@
 	import Button from './Button.svelte';
 
 	export const meta = {
-		title: 'Button',
+		title: 'Iroco-UI/Atoms/Button',
 		component: Button,
 		argTypes: {
 			kind: {
@@ -29,7 +29,7 @@
 
 <Template let:args>
 	<!--👇 'on:click' allows to forward event to addon-actions  -->
-	<Button {...args} on:click on:click={handleClick}>
+	<Button {...args}  on:click={handleClick}>
 		You clicked: {count}
 	</Button>
 </Template>
@@ -37,3 +37,4 @@
 <Story name="Default"></Story>
 <Story name="Success" args={{ kind: 'success' }} />
 <Story name="Danger" args={{ kind: 'danger' }} />
+<Story name="Dark" args={{ kind: 'dark' }} />

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

@@ -22,10 +22,11 @@ export namespace meta {
 /** @typedef {typeof __propDef.props}  ButtonProps */
 /** @typedef {typeof __propDef.events}  ButtonEvents */
 /** @typedef {typeof __propDef.slots}  ButtonSlots */
-export default class Button extends SvelteComponent<{}, {
+export default class Button extends SvelteComponent<{
+    [x: string]: never;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
-    constructor();
 }
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
@@ -33,7 +34,9 @@ export type ButtonSlots = typeof __propDef.slots;
 import Button from './Button.svelte';
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/Button.svelte

@@ -64,6 +64,59 @@ export let 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;
+}
+
 .container-wide {
   width: calc(100% - 20px);
   max-width: 2360px;
@@ -225,32 +278,31 @@ export let node;
   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 {
-  color: #18151e;
-  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 {
   padding: 1em 2em;
@@ -259,21 +311,21 @@ export let node;
   padding: 0.5em 1em;
 }
 .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: #a9a29e;
-  color: #33323a;
-  border-color: #464452;
+.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;
 }
 
@@ -281,6 +333,6 @@ export let node;
   background: none;
   border: none;
   font-family: "Arial";
-  color: #f2ebe3;
+  color: var(--color-text);
   cursor: pointer;
 }</style>

package/dist/DataTable.stories.svelte

@@ -0,0 +1,33 @@
+<script context="module">
+
+	import { DataTable } from './index';
+
+	export const meta = {
+		title: 'Iroco-UI/Components/DataTable',
+		component: DataTable,
+		argTypes: {
+		}
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+	<DataTable {...args}
+						 columns={[
+			{key:"key1",title:"Title 1"},
+			{key:"key2",title:"Title 2"},
+			{key:"key3",title:"Title 3"},
+		]}
+						 rows={[
+			{key1:"value 1",key2:"value 2",key3:"value 3"},
+			{key1:"value a",key2:"value b",key3:"value c"},
+			{key1:1.56,key2:2.76,key3:3.98},
+		]}
+	>
+	</DataTable>
+</Template>
+
+<Story name="Default"></Story>

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

@@ -0,0 +1,29 @@
+export namespace meta {
+    export let title: string;
+    export { DataTable as component };
+    export let argTypes: {};
+}
+/** @typedef {typeof __propDef.props}  DataTableProps */
+/** @typedef {typeof __propDef.events}  DataTableEvents */
+/** @typedef {typeof __propDef.slots}  DataTableSlots */
+export default class DataTable extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DataTableProps = typeof __propDef.props;
+export type DataTableEvents = typeof __propDef.events;
+export type DataTableSlots = typeof __propDef.slots;
+import { DataTable } from './index';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/DataTable.svelte

@@ -77,8 +77,61 @@ export let columns;
   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;
+}
+
 .data-table {
-  border: 1px solid #464452;
+  border: 1px solid var(--color-border);
   width: 100%;
 }
 .data-table__header {
@@ -86,7 +139,7 @@ export let columns;
   height: 4rem;
 }
 .data-table__header__cell {
-  border-bottom: 1px solid #464452;
+  border-bottom: 1px solid var(--color-border);
 }
 .data-table__body__cell {
   text-align: center;

package/dist/IconBurger.stories.svelte

@@ -0,0 +1,32 @@
+<script context="module">
+
+	import IconBurger from './IconBurger.svelte';
+
+	export const meta = {
+		title: 'Iroco-UI/Icons/IconBurger',
+		component: IconBurger,
+		argTypes: {
+			width: {
+				control: { type: 'range' },
+				min: 32,
+				max: 512
+			},
+			height: {
+				control: { type: 'range' },
+				min: 32,
+				max: 512
+			},
+		}
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+	<IconBurger {...args}>
+	</IconBurger>
+</Template>
+
+<Story name="Default"></Story>

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

@@ -0,0 +1,48 @@
+export namespace meta {
+    export let title: string;
+    export { IconBurger as component };
+    export namespace argTypes {
+        namespace width {
+            namespace control {
+                let type: string;
+            }
+            let min: number;
+            let max: number;
+        }
+        namespace height {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            let min_1: number;
+            export { min_1 as min };
+            let max_1: number;
+            export { max_1 as max };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  IconBurgerProps */
+/** @typedef {typeof __propDef.events}  IconBurgerEvents */
+/** @typedef {typeof __propDef.slots}  IconBurgerSlots */
+export default class IconBurger extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconBurgerProps = typeof __propDef.props;
+export type IconBurgerEvents = typeof __propDef.events;
+export type IconBurgerSlots = typeof __propDef.slots;
+import IconBurger from './IconBurger.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/IconClose.stories.svelte

@@ -0,0 +1,32 @@
+<script context="module">
+
+	import IconClose from './IconClose.svelte';
+
+	export const meta = {
+		title: 'Iroco-UI/Icons/IconClose',
+		component: IconClose,
+		argTypes: {
+			width: {
+				control: { type: 'range' },
+				min: 32,
+				max: 512
+			},
+			height: {
+				control: { type: 'range' },
+				min: 32,
+				max: 512
+			}
+		}
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+	<IconClose {...args}>
+	</IconClose>
+</Template>
+
+<Story name="Default"></Story>

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

@@ -0,0 +1,48 @@
+export namespace meta {
+    export let title: string;
+    export { IconClose as component };
+    export namespace argTypes {
+        namespace width {
+            namespace control {
+                let type: string;
+            }
+            let min: number;
+            let max: number;
+        }
+        namespace height {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            let min_1: number;
+            export { min_1 as min };
+            let max_1: number;
+            export { max_1 as max };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  IconCloseProps */
+/** @typedef {typeof __propDef.events}  IconCloseEvents */
+/** @typedef {typeof __propDef.slots}  IconCloseSlots */
+export default class IconClose extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconCloseProps = typeof __propDef.props;
+export type IconCloseEvents = typeof __propDef.events;
+export type IconCloseSlots = typeof __propDef.slots;
+import IconClose from './IconClose.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/IconFloppyDisk.stories.svelte

@@ -0,0 +1,36 @@
+<script context="module">
+
+
+	import { IconFloppyDisk } from './index';
+
+	export const meta = {
+		title: 'Iroco-UI/Icons/IconFloppyDisk',
+		component: IconFloppyDisk,
+		argTypes: {
+			width: {
+				control: { type: 'range' },
+				min: 32,
+				max: 512
+			},
+			height: {
+				control: { type: 'range' },
+				min: 32,
+				max: 512
+			},
+			fill:{
+				control: { type: 'color' },
+			}
+		}
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+	<IconFloppyDisk {...args}>
+	</IconFloppyDisk>
+</Template>
+
+<Story name="Default"></Story>