@iroco/ui 1.1.0 → 1.1.2

package/dist/ImageArticle.stories.svelte

@@ -9,7 +9,7 @@
 
 	const { Story } = defineMeta({
 
-		title: 'ImageArticle',
+		title: 'Iroco-UI/Components/ImageArticle',
 		component: ImageArticle,
 		argTypes: {
 			reversed: {

package/dist/NavBar.stories.svelte

@@ -4,7 +4,7 @@
 	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
 	const { Story } = defineMeta({
-		title: 'NavBar',
+		title: 'Iroco-UI/Components/NavBar',
 		component: NavBar,
 		argTypes: {
 			type: {
@@ -13,6 +13,7 @@
 			}
 		},
 		args: {
+			type:"topbar",
 			navigationItems: [
 				new NavigationItem('About', `/about`),
 				new NavigationItem('Foo', `/foo`),
@@ -37,7 +38,7 @@
 <Story name="Sidebar" args={{ type: 'sidebar' }} />
 <Story name="Topbar" args={{ type: 'topbar' }} />
 <Story name="Active" args={{
-	navigating:{to:{url:{pathname:"/bar"}}},
+		currentRoute:"/bar",
 		navigationItems: [
 				new NavigationItem('About', `/about`),
 				new NavigationItem('Foo', `/foo`),

package/dist/NavBar.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
 	import { IconClose } from './index';
 	import { createEventDispatcher } from 'svelte';
-	import { NavigationItemType, NavigationItem } from './definition.js';
+	import { NavigationItem, NavigationItemType } from './definition.js';
 	import type { MouseEventHandler } from 'svelte/elements';
 
 	interface Props {
 		navigationItems: Array<NavigationItem>;
 		type: 'sidebar' | 'topbar';
 		version?: string | null;
-		navigating?: { to: { url: { pathname: string } } } | null;
+		currentRoute?: string| null;
 		onclick?: MouseEventHandler<HTMLButtonElement>;
 	}
 
-	let { navigationItems, type, version = null, navigating = null, onclick }: Props = $props();
+	let { navigationItems, type, version = null,currentRoute=$bindable(null), onclick }: Props = $props();
 
 	const dispatch = createEventDispatcher();
 
@@ -26,12 +26,16 @@
 
 	function isActive(current: string, item: NavigationItem): boolean {
 		if (typeof item.hrefOrCallback === 'string') {
-			return item.hrefOrCallback === current;
+			console.log("is string url",current);
+			const b = item.hrefOrCallback === current;
+			console.log("is active : ",b);
+			return b;
 		}
 		return false;
 	}
 
-	let active = $derived(navigating?.to.url.pathname ?? '');
+	let active = $derived(currentRoute ?? '');
+
 </script>
 
 <nav data-testid={type} class="nav__{type}">
@@ -41,7 +45,7 @@
 
 	<ul class="nav__{type}__item-container">
 		{#each navigationItems as item}
-			<li class="nav__{type}__item" class:active={isActive(active, item)}>
+			<li class="nav__{type}__item" class:active={isActive(active, item)} aria-current={isActive(active, item)}>
 				{#if item.type === NavigationItemType.FORM}
 					<form method="POST" action={item.hrefOrCallback}>
 						<button class="iroco-ui-link" type="submit">{item.name}</button>

package/dist/NavBar.svelte.d.ts

@@ -4,13 +4,7 @@ interface Props {
     navigationItems: Array<NavigationItem>;
     type: 'sidebar' | 'topbar';
     version?: string | null;
-    navigating?: {
-        to: {
-            url: {
-                pathname: string;
-            };
-        };
-    } | null;
+    currentRoute?: string | null;
     onclick?: MouseEventHandler<HTMLButtonElement>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
@@ -30,6 +24,6 @@ declare const NavBar: $$__sveltets_2_IsomorphicComponent<Props, {
     click_link: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "currentRoute">;
 type NavBar = InstanceType<typeof NavBar>;
 export default NavBar;

package/dist/Navigation.stories.svelte

@@ -6,7 +6,7 @@
 	const { Story } = defineMeta({
 
 
-		title: 'Navigation',
+		title: 'Iroco-UI/Components/Navigation',
 		component: Navigation,
 		argTypes: {
 			color: {
@@ -41,7 +41,7 @@
 <Story name="Title" args={{ title: 'Alternative title' }} />
 <Story name="Color" args={{ color: '#ABCDEF' }} />
 <Story name="Active" args={{
-	navigating:{to:{url:{pathname:"/bar"}}},
+		currentRoute:"/bar",
 		navigationItems: [
 				new NavigationItem('About', `/about`),
 				new NavigationItem('Foo', `/foo`),

package/dist/Navigation.svelte

@@ -11,7 +11,7 @@
 		title?: string | null;
 		version?: string | null;
 		color?: Color | string;
-		navigating?: { to: { url: { pathname: string } } } | null;
+		currentRoute?:string | null;
 	}
 
 	let showMenu = $state(false);
@@ -24,7 +24,7 @@
 		title = null,
 		version = null,
 		color = Color.green,
-		navigating
+		currentRoute = null,
 	}: Props = $props();
 </script>
 
@@ -48,7 +48,7 @@
 			on:click={() => (showMenu = false)}
 			{type}
 			{navigationItems}
-			{navigating}
+			{currentRoute}
 			{version}
 		/>
 	{/if}

package/dist/Navigation.svelte.d.ts

@@ -8,13 +8,7 @@ interface Props {
     title?: string | null;
     version?: string | null;
     color?: Color | string;
-    navigating?: {
-        to: {
-            url: {
-                pathname: string;
-            };
-        };
-    } | null;
+    currentRoute?: string | null;
 }
 declare const Navigation: import("svelte").Component<Props, {}, "">;
 type Navigation = ReturnType<typeof Navigation>;

package/dist/scss/forms.scss

@@ -1,5 +1,3 @@
-//@use 'colors';
-
 .iroco-ui-form {
 	input,
 	textarea {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@iroco/ui",
-	"version": "1.1.0",
+	"version": "1.1.2",
 	"description": "Iroco design system based on Svelte",
 	"main": "dist/index.js",
 	"scripts": {
@@ -16,7 +16,7 @@
 		"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",
-		"build-storybook": "storybook build"
+		"build-storybook": "storybook build --output-dir docs"
 	},
 	"devDependencies": {
 		"@ljcl/storybook-addon-cssprops": "^4.0.0",
@@ -50,7 +50,7 @@
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
 		"release-it": "^18.1.1",
-		"sass": "^1.83.1",
+		"sass": "^1.83.4",
 		"storybook": "^8.4.7",
 		"svelte": "^5.17.3",
 		"svelte-awesome": "^3.3.5",