@iroco/ui 1.0.0-0 → 1.0.0-10

package/dist/ImageArticle.svelte

@@ -0,0 +1,454 @@
+<script>import { Icon } from "svelte-awesome";
+import chevronRight from "svelte-awesome/icons/chevronRight";
+export let imgSrc;
+export let figureCaption = void 0;
+export let alt;
+export let articleTitle;
+export let articleContent;
+export let buttonList = [];
+export let reversed = false;
+</script>
+
+<div class="imagearticle" class:reversed>
+	<figure class="imagearticle__figure">
+		<img class="imagearticle__figure__image"
+				 src={imgSrc}
+				 {alt} />
+		{#if figureCaption}
+			<figcaption>{ figureCaption }</figcaption>
+		{/if}
+	</figure>
+
+	<article class="imagearticle__article">
+		<h1>{articleTitle}</h1>
+		<p>{articleContent}</p>
+		<div class="imagearticle__article__buttonGroup">
+			{#each buttonList as buttonModel}
+				<a
+					class="iroco-ui-button iroco-ui-button--small iroco-ui-button--dark"
+					href={buttonModel.href}
+					role="button"
+				>
+					<Icon data={chevronRight} />
+					{buttonModel.label}
+				</a>
+			{/each}
+		</div>
+	</article>
+</div>
+
+<style>.container-wide {
+  width: calc(100% - 20px);
+  max-width: 2360px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+@media all and (max-width: 2560px) {
+  .container-wide {
+    max-width: 1620px;
+  }
+}
+@media all and (max-width: 1800px) {
+  .container-wide {
+    max-width: 1280px;
+  }
+}
+@media all and (max-width: 1440px) {
+  .container-wide {
+    max-width: 884px;
+  }
+}
+@media all and (max-width: 1024px) {
+  .container-wide {
+    max-width: 648px;
+  }
+}
+@media all and (max-width: 768px) {
+  .container-wide {
+    max-width: 496px;
+  }
+}
+@media all and (max-width: 596px) {
+  .container-wide {
+    max-width: 365px;
+  }
+}
+@media all and (max-width: 425px) {
+  .container-wide {
+    max-width: calc(100% - 60px);
+  }
+}
+@media all and (max-width: 375px) {
+  .container-wide {
+    max-width: calc(100% - 40px);
+  }
+}
+@media all and (max-width: 320px) {
+  .container-wide {
+    max-width: calc(100% - 20px);
+  }
+}
+.container-large {
+  width: calc(100% - 20px);
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+@media all and (max-width: 1440px) {
+  .container-large {
+    max-width: 884px;
+  }
+}
+@media all and (max-width: 1024px) {
+  .container-large {
+    max-width: 648px;
+  }
+}
+@media all and (max-width: 768px) {
+  .container-large {
+    max-width: 496px;
+  }
+}
+@media all and (max-width: 596px) {
+  .container-large {
+    max-width: 365px;
+  }
+}
+@media all and (max-width: 425px) {
+  .container-large {
+    max-width: calc(100% - 60px);
+  }
+}
+@media all and (max-width: 375px) {
+  .container-large {
+    max-width: calc(100% - 40px);
+  }
+}
+@media all and (max-width: 320px) {
+  .container-large {
+    max-width: calc(100% - 20px);
+  }
+}
+.container-medium {
+  width: calc(100% - 20px);
+  max-width: 884px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+@media all and (max-width: 1024px) {
+  .container-medium {
+    max-width: 648px;
+  }
+}
+@media all and (max-width: 768px) {
+  .container-medium {
+    max-width: 496px;
+  }
+}
+@media all and (max-width: 596px) {
+  .container-medium {
+    max-width: 365px;
+  }
+}
+@media all and (max-width: 425px) {
+  .container-medium {
+    max-width: calc(100% - 60px);
+  }
+}
+@media all and (max-width: 375px) {
+  .container-medium {
+    max-width: calc(100% - 40px);
+  }
+}
+@media all and (max-width: 320px) {
+  .container-medium {
+    max-width: calc(100% - 20px);
+  }
+}
+.container-small {
+  width: calc(100% - 20px);
+  max-width: 496px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+@media all and (max-width: 425px) {
+  .container-small {
+    max-width: calc(100% - 60px);
+  }
+}
+@media all and (max-width: 375px) {
+  .container-small {
+    max-width: calc(100% - 40px);
+  }
+}
+@media all and (max-width: 320px) {
+  .container-small {
+    max-width: calc(100% - 20px);
+  }
+}
+.container-wide {
+  width: calc(100% - 20px);
+  max-width: 2360px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+@media all and (max-width: 2560px) {
+  .container-wide {
+    max-width: 1620px;
+  }
+}
+@media all and (max-width: 1800px) {
+  .container-wide {
+    max-width: 1280px;
+  }
+}
+@media all and (max-width: 1440px) {
+  .container-wide {
+    max-width: 884px;
+  }
+}
+@media all and (max-width: 1024px) {
+  .container-wide {
+    max-width: 648px;
+  }
+}
+@media all and (max-width: 768px) {
+  .container-wide {
+    max-width: 496px;
+  }
+}
+@media all and (max-width: 596px) {
+  .container-wide {
+    max-width: 365px;
+  }
+}
+@media all and (max-width: 425px) {
+  .container-wide {
+    max-width: calc(100% - 60px);
+  }
+}
+@media all and (max-width: 375px) {
+  .container-wide {
+    max-width: calc(100% - 40px);
+  }
+}
+@media all and (max-width: 320px) {
+  .container-wide {
+    max-width: calc(100% - 20px);
+  }
+}
+.container-large {
+  width: calc(100% - 20px);
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+@media all and (max-width: 1440px) {
+  .container-large {
+    max-width: 884px;
+  }
+}
+@media all and (max-width: 1024px) {
+  .container-large {
+    max-width: 648px;
+  }
+}
+@media all and (max-width: 768px) {
+  .container-large {
+    max-width: 496px;
+  }
+}
+@media all and (max-width: 596px) {
+  .container-large {
+    max-width: 365px;
+  }
+}
+@media all and (max-width: 425px) {
+  .container-large {
+    max-width: calc(100% - 60px);
+  }
+}
+@media all and (max-width: 375px) {
+  .container-large {
+    max-width: calc(100% - 40px);
+  }
+}
+@media all and (max-width: 320px) {
+  .container-large {
+    max-width: calc(100% - 20px);
+  }
+}
+.container-medium {
+  width: calc(100% - 20px);
+  max-width: 884px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+@media all and (max-width: 1024px) {
+  .container-medium {
+    max-width: 648px;
+  }
+}
+@media all and (max-width: 768px) {
+  .container-medium {
+    max-width: 496px;
+  }
+}
+@media all and (max-width: 596px) {
+  .container-medium {
+    max-width: 365px;
+  }
+}
+@media all and (max-width: 425px) {
+  .container-medium {
+    max-width: calc(100% - 60px);
+  }
+}
+@media all and (max-width: 375px) {
+  .container-medium {
+    max-width: calc(100% - 40px);
+  }
+}
+@media all and (max-width: 320px) {
+  .container-medium {
+    max-width: calc(100% - 20px);
+  }
+}
+.container-small {
+  width: calc(100% - 20px);
+  max-width: 496px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+@media all and (max-width: 425px) {
+  .container-small {
+    max-width: calc(100% - 60px);
+  }
+}
+@media all and (max-width: 375px) {
+  .container-small {
+    max-width: calc(100% - 40px);
+  }
+}
+@media all and (max-width: 320px) {
+  .container-small {
+    max-width: calc(100% - 20px);
+  }
+}
+.iroco-ui-button {
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: none;
+  flex-shrink: 0;
+  margin: 1em 0;
+  position: relative;
+  text-transform: uppercase;
+  border-radius: 0.3em;
+}
+.iroco-ui-button--basic {
+  color: var(--btn-basic-label);
+  background: var(--btn-basic-bg);
+  border: 1px solid var(--btn-basic-border);
+}
+.iroco-ui-button--dark {
+  background: var(--dark-btn-primary-bg);
+  color: var(--dark-btn-primary-label);
+}
+.iroco-ui-button--success {
+  background: var(--color-success);
+  color: var(--btn-secondary-label);
+}
+.iroco-ui-button--danger {
+  background: var(--color-danger);
+}
+.iroco-ui-button--regular {
+  padding: 1em 2em;
+}
+.iroco-ui-button--small {
+  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 var(--color-black-op-20);
+}
+.iroco-ui-button--dark:hover {
+  box-shadow: inset 0 0 0 10em var(--color-white-op-20);
+}
+.iroco-ui-button:active {
+  box-shadow: none;
+}
+.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 {
+  box-shadow: none;
+}
+.iroco-ui-link {
+  background: none;
+  border: none;
+  font-family: "Arial";
+  color: var(--color-text);
+  cursor: pointer;
+}
+.imagearticle {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.imagearticle__figure {
+  width: 40%;
+  display: block;
+  object-fit: cover;
+  margin: 0 auto;
+  text-align: center;
+}
+.imagearticle__figure__image {
+  width: 100%;
+}
+.imagearticle__article {
+  width: 50%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  padding: 2em;
+}
+.imagearticle__article__buttonGroup {
+  display: flex;
+  gap: 1em;
+  flex-wrap: wrap;
+}
+.imagearticle.reversed {
+  flex-direction: row-reverse;
+}
+@media all and (max-width: 768px) {
+  .imagearticle {
+    display: block;
+    width: 80%;
+    text-align: center;
+  }
+  .imagearticle__figure {
+    width: 100%;
+  }
+  .imagearticle__figure__image {
+    width: 100%;
+  }
+  .imagearticle__article {
+    width: 100%;
+  }
+}</style>

package/dist/ImageArticle.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { ButtonModel } from './definition';
+declare const __propDef: {
+    props: {
+        imgSrc: string;
+        figureCaption?: string | undefined;
+        alt: string;
+        articleTitle: string;
+        articleContent: string;
+        buttonList?: ButtonModel[] | undefined;
+        reversed?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ImageArticleProps = typeof __propDef.props;
+export type ImageArticleEvents = typeof __propDef.events;
+export type ImageArticleSlots = typeof __propDef.slots;
+export default class ImageArticle extends SvelteComponent<ImageArticleProps, ImageArticleEvents, ImageArticleSlots> {
+}
+export {};

package/dist/IrocoLogo.stories.svelte

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

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

@@ -0,0 +1,50 @@
+export namespace meta {
+    export let title: string;
+    export let type: string;
+    export { IrocoLogo 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}  IrocoLogoProps */
+/** @typedef {typeof __propDef.events}  IrocoLogoEvents */
+/** @typedef {typeof __propDef.slots}  IrocoLogoSlots */
+export default class IrocoLogo extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IrocoLogoProps = typeof __propDef.props;
+export type IrocoLogoEvents = typeof __propDef.events;
+export type IrocoLogoSlots = typeof __propDef.slots;
+import { IrocoLogo } from './index';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/IrocoLogo.svelte

@@ -1,13 +1,10 @@
-<script>import { createEventDispatcher } from "svelte";
+<script>export let href = `/`;
+export let ariaLabel = "go to Iroco home";
 export let width = "10rem";
 export let height = "10rem";
-const dispatch = createEventDispatcher();
-function clickOnLogo() {
-  dispatch("click_logo");
-}
 </script>
 
-<a class="iroco-logo" href="/" aria-label="go to Iroco home" on:click={clickOnLogo}>
+<a class="iroco-logo" {href} aria-label={ariaLabel}>
 	<svg viewBox="0 0 832.33 249.52" role="img" {width} {height}>
 		<title>Iroco Logo</title>
 		<path

package/dist/IrocoLogo.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        href?: string | undefined;
+        ariaLabel?: string | undefined;
         width?: string | undefined;
         height?: string | undefined;
     };
     events: {
-        click_logo: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/Loader.stories.svelte

@@ -0,0 +1,19 @@
+<script context="module">
+	import { Loader } from './index';
+
+	export const meta = {
+		title: 'Iroco-UI/Atoms/Loader',
+		component: Loader,
+		argTypes: {}
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+	<Loader {...args} />
+</Template>
+
+<Story name="Default" />

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

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

package/dist/NavBar.stories.svelte

@@ -0,0 +1,37 @@
+<script context="module">
+	import { NavigationItem, NavigationItemType } from './definition';
+	import { NavBar } from './index';
+
+	export const meta = {
+		title: 'NavBar',
+		component: NavBar,
+		argTypes: {
+			type: {
+				control: { type: 'select' },
+				options: ['sidebar', 'topbar']
+			}
+		}
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+	<NavBar
+		{...args}
+		navigationItems={[
+			new NavigationItem('About', `/about`),
+			new NavigationItem('Foo', `/foo`),
+			new NavigationItem('Bar', `/bar`),
+			new NavigationItem('Button', `/bar`, NavigationItemType.BUTTON),
+			new NavigationItem('Anchor', `/bar`, NavigationItemType.ANCHOR),
+			new NavigationItem('Form', `/bar`, NavigationItemType.FORM)
+		]}
+	/>
+</Template>
+
+<Story name="Default" />
+<Story name="Sidebar" args={{ type: 'sidebar' }} />
+<Story name="Title" args={{ title: 'Alternative title' }} />

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

@@ -0,0 +1,37 @@
+export namespace meta {
+    export let title: string;
+    export { NavBar 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}  NavBarProps */
+/** @typedef {typeof __propDef.events}  NavBarEvents */
+/** @typedef {typeof __propDef.slots}  NavBarSlots */
+export default class NavBar extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type NavBarProps = typeof __propDef.props;
+export type NavBarEvents = typeof __propDef.events;
+export type NavBarSlots = typeof __propDef.slots;
+import { NavBar } from './index';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};