@iroco/ui 1.0.0-6 → 1.0.0-8

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,7 +14,6 @@ export let node;
 	{type}
 	{disabled}
 	on:click
-	bind:this={node}
 >
 	<slot />
 </button>

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/ImageArticle.stories.svelte

@@ -12,6 +12,9 @@
 			reversed: {
 				control: { type: 'boolean' }
 			},
+			figureCaption: {
+				control: { type: 'text' }
+			},
 			imgSrc: {
 				control: { type: 'select' },
 				options: [
@@ -24,8 +27,9 @@
 			buttonList: {}
 		},
 		args: {
-			alt: 'Accessibility aleternative text',
+			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: [
@@ -47,3 +51,11 @@
 
 <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

@@ -7,12 +7,19 @@ export namespace meta {
                 let type: string;
             }
         }
-        namespace imgSrc {
+        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: {};
@@ -20,6 +27,8 @@ export namespace meta {
     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: {

package/dist/ImageArticle.svelte

@@ -1,6 +1,7 @@
 <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;
@@ -9,7 +10,15 @@ export let reversed = false;
 </script>
 
 <div class="imagearticle" class:reversed>
-	<img class="imagearticle__image" src={imgSrc} {alt} />
+	<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>
@@ -400,11 +409,15 @@ export let reversed = false;
   justify-content: space-around;
   align-items: center;
 }
-.imagearticle__image {
+.imagearticle__figure {
   width: 40%;
   display: block;
   object-fit: cover;
   margin: 0 auto;
+  text-align: center;
+}
+.imagearticle__figure__image {
+  width: 100%;
 }
 .imagearticle__article {
   width: 50%;
@@ -429,7 +442,10 @@ export let reversed = false;
     width: 80%;
     text-align: center;
   }
-  .imagearticle__image {
+  .imagearticle__figure {
+    width: 100%;
+  }
+  .imagearticle__figure__image {
     width: 100%;
   }
   .imagearticle__article {

package/dist/ImageArticle.svelte.d.ts

@@ -3,6 +3,7 @@ import type { ButtonModel } from './definition';
 declare const __propDef: {
     props: {
         imgSrc: string;
+        figureCaption?: string | undefined;
         alt: string;
         articleTitle: string;
         articleContent: string;

package/dist/NumberInput.svelte

@@ -1,6 +1,6 @@
 <script>export let id;
-export let label;
-export let placeholder;
+export let label = "";
+export let placeholder = "";
 export let error = null;
 export let value = null;
 export let min;

package/dist/NumberInput.svelte.d.ts

@@ -3,8 +3,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id: string;
-        label: string | '';
-        placeholder: string | '';
+        label?: string | undefined;
+        placeholder?: string | undefined;
         error?: string | null | undefined;
         value?: number | null | undefined;
         min: number | undefined;

package/dist/TextInput.stories.svelte

@@ -54,6 +54,7 @@
 	<form class="iroco-ui-form">
 		<TextInput {...args} />
 	</form>
+
 </Template>
 
 <Story name="Default" />

package/dist/TextInput.svelte

@@ -1,13 +1,14 @@
-<script>export let id;
-export let type;
+<script>import {} from "./definition";
+export let id;
+export let type = TextInputType.text;
 export let name;
 export let label = null;
-export let placeholder;
+export let placeholder = null;
 export let error = null;
 export let htmlError = false;
 export let value = null;
-export let onFocus;
-export let onBlur;
+export let onFocus = null;
+export let onBlur = null;
 export let readonly = false;
 export let border = false;
 export let autocomplete = "on";

package/dist/TextInput.svelte.d.ts

@@ -1,17 +1,17 @@
 import { SvelteComponent } from "svelte";
-import type { TextInputType } from './definition';
+import { type TextInputType } from './definition';
 declare const __propDef: {
     props: {
         id: string;
-        type: TextInputType;
+        type?: TextInputType | undefined;
         name: string;
         label?: string | null | undefined;
-        placeholder: string | undefined;
+        placeholder?: string | null | undefined;
         error?: string | null | undefined;
         htmlError?: boolean | undefined;
         value?: string | null | undefined;
-        onFocus: (e: FocusEvent) => void | null;
-        onBlur: (e: Event) => void | null;
+        onFocus?: ((e: FocusEvent) => void | null) | undefined;
+        onBlur?: ((e: Event) => void | null) | undefined;
         readonly?: boolean | undefined;
         border?: boolean | undefined;
         autocomplete?: string | undefined;

package/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "@iroco/ui",
-	"version": "1.0.0-6",
+	"version": "1.0.0-8",
 	"description": "Iroco design system based on Svelte",
 	"main": "dist/index.js",
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "storybook dev -p 5175",
 		"build": "svelte-kit sync && svelte-package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -14,7 +14,6 @@
 		"format": "prettier --plugin-search-dir . --write .",
 		"clean": "rm -rf dist && npm cache clean --force",
 		"release": "npm run format && npm run build && release-it --only-version",
-		"storybook": "storybook dev -p 5175",
 		"build-storybook": "storybook build"
 	},
 	"devDependencies": {