@iroco/ui 1.0.0-3 → 1.0.0-5

package/README.md

@@ -1,6 +1,6 @@
 # iroco-ui
 
-[![Circle CI](https://circleci.com/gh/iroco-co/iroco-ui.png?circle-token=218e3654fb138427bb709b068ed847b58f8d4ac7&style=svg)](https://app.circleci.com/pipelines/github/iroco-co/iroco-ui)
+[![CircleCI](https://dl.circleci.com/status-badge/img/gh/iroco-co/iroco-ui/tree/main.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/iroco-co/iroco-ui/tree/main)
 
 Design system for Iroco [based on SvelteKit](https://kit.svelte.dev/docs/packaging).
 
@@ -25,7 +25,6 @@ npm install @iroco/ui@next
 `src/app.scss`
 
 ```scss
-@use 'node_modules/@iroco/ui/dist/scss/colors';
 @use 'node_modules/@iroco/ui/dist/scss/fonts';
 @use 'node_modules/@iroco/ui/dist/scss/style';
 @use 'node_modules/@iroco/ui/dist/scss/constants';
@@ -38,25 +37,21 @@ Example of layout with navigation
 
 ```svelte
 <script>
-   import '../app.scss';
-   import { Navigation, NavigationItem } from '@iroco/ui';
+	import '../app.scss';
+	import { Navigation, NavigationItem } from '@iroco/ui';
 </script>
 
-<Navigation
-   navigationItems={[new NavigationItem("About", "/about"),]}
-   type="topbar"
-/>
+<Navigation navigationItems={[new NavigationItem('About', '/about')]} type="topbar" />
 <main class="main">
-   <slot />
+	<slot />
 </main>
 
 <style lang="scss">
-  @use "node_modules/@iroco/ui/dist/scss/colors.scss";
-  @use "node_modules/@iroco/ui/dist/scss/constants.scss";
-  @import "node_modules/@iroco/ui/dist/scss/containers.scss";
-  @import "node_modules/@iroco/ui/dist/scss/button.scss";
+	@use 'node_modules/@iroco/ui/dist/scss/colors.scss';
+	@use 'node_modules/@iroco/ui/dist/scss/constants.scss';
+	@import 'node_modules/@iroco/ui/dist/scss/containers.scss';
+	@import 'node_modules/@iroco/ui/dist/scss/button.scss';
 </style>
-
 ```
 
 # develop

package/dist/Alert.stories.svelte

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

@@ -10,51 +10,7 @@ export let callback;
 	<slot />
 </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;
-}
-
-.alert {
+<style>.alert {
   flex-direction: column;
   position: relative;
   min-height: 2em;
@@ -67,16 +23,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 +42,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,11 +29,12 @@
 
 <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>
 
-<Story name="Default"></Story>
+<Story name="Default" />
 <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

@@ -20,51 +20,7 @@ export let node;
 	<slot />
 </button>
 
-<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;
-}
-
-.container-wide {
+<style>.container-wide {
   width: calc(100% - 20px);
   max-width: 2360px;
   margin-left: auto;
@@ -225,32 +181,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 +214,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 +236,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,31 @@
+<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 }
+		]}
+	/>
+</Template>
+
+<Story name="Default" />

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

@@ -33,52 +33,8 @@ export let columns;
 	</tbody>
 </table>
 
-<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;
-}
-
-.data-table {
-  border: 1px solid #464452;
+<style>.data-table {
+  border: 1px solid var(--color-border);
   width: 100%;
 }
 .data-table__header {
@@ -86,7 +42,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,30 @@
+<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} />
+</Template>
+
+<Story name="Default" />

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,30 @@
+<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} />
+</Template>
+
+<Story name="Default" />

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