@iroco/ui 1.0.0-0 → 1.0.0-10

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

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

@@ -0,0 +1,55 @@
+export namespace meta {
+    export let title: string;
+    export { IconFloppyDisk 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 };
+        }
+        namespace fill {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  IconFloppyDiskProps */
+/** @typedef {typeof __propDef.events}  IconFloppyDiskEvents */
+/** @typedef {typeof __propDef.slots}  IconFloppyDiskSlots */
+export default class IconFloppyDisk extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconFloppyDiskProps = typeof __propDef.props;
+export type IconFloppyDiskEvents = typeof __propDef.events;
+export type IconFloppyDiskSlots = typeof __propDef.slots;
+import { IconFloppyDisk } from './index';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/IconInfo.stories.svelte

@@ -0,0 +1,31 @@
+<script context="module">
+	import { IconInfo } from './index';
+
+	export const meta = {
+		title: 'Iroco-UI/Icons/IconInfo',
+		type: 'Icons',
+		component: IconInfo,
+		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>
+	<IconInfo {...args} />
+</Template>
+
+<Story name="Default" />

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

@@ -0,0 +1,50 @@
+export namespace meta {
+    export let title: string;
+    export let type: string;
+    export { IconInfo as component };
+    export namespace argTypes {
+        namespace width {
+            namespace control {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            let min: number;
+            let max: number;
+        }
+        namespace height {
+            export namespace control_1 {
+                let type_2: string;
+                export { type_2 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}  IconInfoProps */
+/** @typedef {typeof __propDef.events}  IconInfoEvents */
+/** @typedef {typeof __propDef.slots}  IconInfoSlots */
+export default class IconInfo extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconInfoProps = typeof __propDef.props;
+export type IconInfoEvents = typeof __propDef.events;
+export type IconInfoSlots = typeof __propDef.slots;
+import { IconInfo } from './index';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/IconIrocoLogo.stories.svelte

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

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

@@ -0,0 +1,57 @@
+export namespace meta {
+    export let title: string;
+    export let type: string;
+    export { IconIrocoLogo as component };
+    export namespace argTypes {
+        namespace width {
+            namespace control {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            let min: number;
+            let max: number;
+        }
+        namespace height {
+            export namespace control_1 {
+                let type_2: string;
+                export { type_2 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 };
+        }
+        namespace color {
+            export namespace control_2 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_2 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  IconIrocoLogoProps */
+/** @typedef {typeof __propDef.events}  IconIrocoLogoEvents */
+/** @typedef {typeof __propDef.slots}  IconIrocoLogoSlots */
+export default class IconIrocoLogo extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconIrocoLogoProps = typeof __propDef.props;
+export type IconIrocoLogoEvents = typeof __propDef.events;
+export type IconIrocoLogoSlots = typeof __propDef.slots;
+import { IconIrocoLogo } from './index';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/IconIrocoLogo.svelte

@@ -1,16 +1,20 @@
 <script>import { Color } from "./definition";
+export let href = "/";
+export let ariaLabel = "go to Iroco home";
 export let width = "5rem";
 export let height = "5rem";
 export let color = Color.green;
 </script>
 
-<svg {width} {height} viewBox="0 0 54 53" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path
-		d="M30.009 29.9999C29.3241 30.0677 28.7761 30.1355 28.4336 30.2033C28.0912 30.3389 27.8857 30.5423 27.7487 30.8812C27.6117 31.2202 27.5432 31.7626 27.5432 32.5084V47.1524C27.5432 47.8982 27.6117 48.4406 27.7487 48.7795C27.8857 49.1185 28.0912 49.3219 28.4336 49.4575C28.7761 49.5931 29.2556 49.6609 30.009 49.6609V50.2711C29.1186 50.2033 27.8172 50.2033 26.2419 50.2033C24.5295 50.2033 23.2282 50.2033 22.4062 50.2711V49.7965C23.0912 49.7287 23.6391 49.6609 23.9816 49.5931C24.3241 49.4575 24.5295 49.2541 24.6665 48.9151C24.8035 48.5762 24.872 48.0338 24.872 47.288V32.5762C24.872 31.8304 24.8035 31.288 24.6665 30.949C24.5295 30.6101 24.3241 30.4067 23.9816 30.2711C23.6391 30.1355 23.1597 30.0677 22.4062 30.0677V29.4575C23.2282 29.5253 24.5295 29.5253 26.2419 29.5253C27.8172 29.5253 29.1186 29.5253 30.009 29.4575V29.9999Z"
-		fill="white"
-	/>
-	<path
-		d="M18.7079 40.4406C11.1737 37.3897 6.24219 30.2033 6.24219 22.1355C6.24219 11.2202 15.2148 2.33887 26.2422 2.33887C37.2696 2.33887 46.2422 11.2202 46.2422 22.1355C46.2422 30.2033 41.3107 37.4575 33.7764 40.4406L32.2696 36.9151C38.3655 34.4745 42.3381 28.6439 42.3381 22.0677C42.3381 13.2541 35.0778 6.06768 26.1737 6.06768C17.2696 6.06768 10.0093 13.2541 10.0093 22.0677C10.0093 28.5762 13.9819 34.4067 20.0778 36.9151L18.7079 40.4406Z"
-		fill={color}
-	/>
-</svg>
+<a class="iroco-logo" {href} aria-label={ariaLabel}>
+	<svg {width} {height} viewBox="0 0 54 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M30.009 29.9999C29.3241 30.0677 28.7761 30.1355 28.4336 30.2033C28.0912 30.3389 27.8857 30.5423 27.7487 30.8812C27.6117 31.2202 27.5432 31.7626 27.5432 32.5084V47.1524C27.5432 47.8982 27.6117 48.4406 27.7487 48.7795C27.8857 49.1185 28.0912 49.3219 28.4336 49.4575C28.7761 49.5931 29.2556 49.6609 30.009 49.6609V50.2711C29.1186 50.2033 27.8172 50.2033 26.2419 50.2033C24.5295 50.2033 23.2282 50.2033 22.4062 50.2711V49.7965C23.0912 49.7287 23.6391 49.6609 23.9816 49.5931C24.3241 49.4575 24.5295 49.2541 24.6665 48.9151C24.8035 48.5762 24.872 48.0338 24.872 47.288V32.5762C24.872 31.8304 24.8035 31.288 24.6665 30.949C24.5295 30.6101 24.3241 30.4067 23.9816 30.2711C23.6391 30.1355 23.1597 30.0677 22.4062 30.0677V29.4575C23.2282 29.5253 24.5295 29.5253 26.2419 29.5253C27.8172 29.5253 29.1186 29.5253 30.009 29.4575V29.9999Z"
+			fill="white"
+		/>
+		<path
+			d="M18.7079 40.4406C11.1737 37.3897 6.24219 30.2033 6.24219 22.1355C6.24219 11.2202 15.2148 2.33887 26.2422 2.33887C37.2696 2.33887 46.2422 11.2202 46.2422 22.1355C46.2422 30.2033 41.3107 37.4575 33.7764 40.4406L32.2696 36.9151C38.3655 34.4745 42.3381 28.6439 42.3381 22.0677C42.3381 13.2541 35.0778 6.06768 26.1737 6.06768C17.2696 6.06768 10.0093 13.2541 10.0093 22.0677C10.0093 28.5762 13.9819 34.4067 20.0778 36.9151L18.7079 40.4406Z"
+			fill={color}
+		/>
+	</svg>
+</a>

package/dist/IconIrocoLogo.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 import { Color } from './definition';
 declare const __propDef: {
     props: {
+        href?: string | undefined;
+        ariaLabel?: string | undefined;
         width?: string | undefined;
         height?: string | undefined;
         color?: Color | undefined;

package/dist/IconMoreSign.stories.svelte

@@ -0,0 +1,31 @@
+<script context="module">
+	import IconMoreSign from './IconMoreSign.svelte';
+
+	export const meta = {
+		title: 'Iroco-UI/Icons/IconMoreSign',
+		type: 'Icons',
+		component: IconMoreSign,
+		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>
+	<IconMoreSign {...args} />
+</Template>
+
+<Story name="Default" />

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

@@ -0,0 +1,50 @@
+export namespace meta {
+    export let title: string;
+    export let type: string;
+    export { IconMoreSign as component };
+    export namespace argTypes {
+        namespace width {
+            namespace control {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            let min: number;
+            let max: number;
+        }
+        namespace height {
+            export namespace control_1 {
+                let type_2: string;
+                export { type_2 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}  IconMoreSignProps */
+/** @typedef {typeof __propDef.events}  IconMoreSignEvents */
+/** @typedef {typeof __propDef.slots}  IconMoreSignSlots */
+export default class IconMoreSign extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconMoreSignProps = typeof __propDef.props;
+export type IconMoreSignEvents = typeof __propDef.events;
+export type IconMoreSignSlots = typeof __propDef.slots;
+import IconMoreSign from './IconMoreSign.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/IconTrashCan.stories.svelte

@@ -0,0 +1,31 @@
+<script context="module">
+	import { IconTrashCan } from './index';
+
+	export const meta = {
+		title: 'Iroco-UI/Icons/IconTrashCan',
+		type: 'Icons',
+		component: IconTrashCan,
+		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>
+	<IconTrashCan {...args} />
+</Template>
+
+<Story name="Default" />

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

@@ -0,0 +1,50 @@
+export namespace meta {
+    export let title: string;
+    export let type: string;
+    export { IconTrashCan as component };
+    export namespace argTypes {
+        namespace width {
+            namespace control {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            let min: number;
+            let max: number;
+        }
+        namespace height {
+            export namespace control_1 {
+                let type_2: string;
+                export { type_2 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}  IconTrashCanProps */
+/** @typedef {typeof __propDef.events}  IconTrashCanEvents */
+/** @typedef {typeof __propDef.slots}  IconTrashCanSlots */
+export default class IconTrashCan extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconTrashCanProps = typeof __propDef.props;
+export type IconTrashCanEvents = typeof __propDef.events;
+export type IconTrashCanSlots = typeof __propDef.slots;
+import { IconTrashCan } from './index';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/ImageArticle.stories.svelte

@@ -0,0 +1,61 @@
+<script context="module">
+	import ImageArticle from './ImageArticle.svelte';
+	import accessibilityImageFile from '../stories/assets/accessibility.svg';
+	import discordImageFile from '../stories/assets/discord.svg';
+	import youtubeImageFile from '../stories/assets/youtube.svg';
+	import tutorialsImageFile from '../stories/assets/tutorials.svg';
+
+	export const meta = {
+		title: 'ImageArticle',
+		component: ImageArticle,
+		argTypes: {
+			reversed: {
+				control: { type: 'boolean' }
+			},
+			figureCaption: {
+				control: { type: 'text' }
+			},
+			imgSrc: {
+				control: { type: 'select' },
+				options: [
+					accessibilityImageFile,
+					discordImageFile,
+					youtubeImageFile,
+					tutorialsImageFile,
+					tutorialsImageFile]
+			},
+			buttonList: {}
+		},
+		args: {
+			alt: 'Accessibility alternative text',
+			imgSrc: accessibilityImageFile,
+			figureCaption: undefined,
+			articleTitle: 'Accessibility',
+			articleContent: 'Accessibility is incredibly important, yet often overlooked in traditional digital design and development education. Because of this, The A11Y Project strives to be a living example of how to create beautiful, accessible, and inclusive digital experiences.',
+			buttonList: [
+				{ href: '/foo', label: 'Foo' },
+				{ href: '/bar', label: 'Bar' }
+			],
+			reversed: false
+		}
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+	<ImageArticle {...args}></ImageArticle>
+</Template>
+
+<Story name="Default" />
+<Story name="Reversed" args={{ reversed: true }} />
+<Story name="Figure caption" args={{ figureCaption: "An optional caption for the figure" ,
+buttonList:[
+	{
+		href:"https://developer.mozilla.org/en-US/docs/Glossary/Accessible_description",
+		label:"Learn about accessible description"
+	}
+	]
+}} />

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

@@ -0,0 +1,66 @@
+export namespace meta {
+    export let title: string;
+    export { ImageArticle as component };
+    export namespace argTypes {
+        namespace reversed {
+            namespace control {
+                let type: string;
+            }
+        }
+        namespace figureCaption {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace imgSrc {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            export let options: any[];
+        }
+        let buttonList: {};
+    }
+    export namespace args {
+        export let alt: string;
+        export { accessibilityImageFile as imgSrc };
+        let figureCaption_1: undefined;
+        export { figureCaption_1 as figureCaption };
+        export let articleTitle: string;
+        export let articleContent: string;
+        let buttonList_1: {
+            href: string;
+            label: string;
+        }[];
+        export { buttonList_1 as buttonList };
+        let reversed_1: boolean;
+        export { reversed_1 as reversed };
+    }
+}
+/** @typedef {typeof __propDef.props}  ImageArticleProps */
+/** @typedef {typeof __propDef.events}  ImageArticleEvents */
+/** @typedef {typeof __propDef.slots}  ImageArticleSlots */
+export default class ImageArticle extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ImageArticleProps = typeof __propDef.props;
+export type ImageArticleEvents = typeof __propDef.events;
+export type ImageArticleSlots = typeof __propDef.slots;
+import ImageArticle from './ImageArticle.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};