@iroco/ui 1.0.0-1 → 1.0.0-10

package/README.md

@@ -1,11 +1,59 @@
 # 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).
 
 See the [Documentation](https://iroco-co.github.io/iroco-ui/) (not in sync anymore : to be restored with storybook)
 
+# Install in your svelte application
+
+Prerequisites:
+
+- @sveltejs/kit: ^2.5.0
+- svelte: ^4.2.10
+
+```sh
+# latest
+npm install @iroco/ui
+# next
+npm install @iroco/ui@next
+```
+
+## Minimal scaffolding
+
+`src/app.scss`
+
+```scss
+@use 'node_modules/@iroco/ui/dist/scss/fonts';
+@use 'node_modules/@iroco/ui/dist/scss/style';
+@use 'node_modules/@iroco/ui/dist/scss/constants';
+@import 'node_modules/@iroco/ui/dist/scss/containers';
+```
+
+Example of layout with navigation
+
+`src/routes/+layout.svelte`
+
+```svelte
+<script>
+	import '../app.scss';
+	import { Navigation, NavigationItem } from '@iroco/ui';
+</script>
+
+<Navigation navigationItems={[new NavigationItem('About', '/about')]} type="topbar" />
+<main class="main">
+	<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';
+</style>
+```
+
 # develop
 
 To install dependencies :

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: #f2ebe3;
+  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,14 +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 name="Success" args={{ kind: 'success' }} />
 <Story name="Danger" args={{ kind: 'danger' }} />
-
-<!-- Dynamic snippet should be disabled for this story -->
-<Story name="Button No Args">
-	<Button>Label</Button>
-</Story>
+<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

@@ -5,7 +5,6 @@ export let disabled = false;
 export let kind = "basic";
 export let size = "regular";
 export let id;
-export let node;
 </script>
 
 <button
@@ -15,56 +14,11 @@ export let node;
 	{type}
 	{disabled}
 	on:click
-	bind:this={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,31 +179,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 {
-  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;
@@ -258,19 +212,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: #f5f5f5;
+.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;
 }
 
@@ -278,6 +234,6 @@ export let node;
   background: none;
   border: none;
   font-family: "Arial";
-  color: #f2ebe3;
+  color: var(--color-text);
   cursor: pointer;
 }</style>

package/dist/Button.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         kind?: "success" | "danger" | "dark" | "basic" | undefined;
         size?: "small" | "regular" | undefined;
         id: string;
-        node: HTMLElement;
     };
     events: {
         click: MouseEvent;
@@ -36,8 +35,5 @@ export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, B
     get id(): string;
     /**accessor*/
     set id(_: string);
-    get node(): HTMLElement;
-    /**accessor*/
-    set node(_: HTMLElement);
 }
 export {};

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" />