@iroco/ui 1.13.0 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/IconIrocoLogo.svelte +13 -5
- package/dist/IconIrocoLogo.svelte.d.ts +1 -1
- package/dist/IrocoLogo.svelte +13 -5
- package/dist/IrocoLogo.svelte.d.ts +1 -1
- package/dist/Navigation.stories.svelte +1 -0
- package/dist/Navigation.svelte +8 -7
- package/dist/Navigation.svelte.d.ts +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { Color } from './definition';
|
|
3
3
|
|
|
4
4
|
interface Props {
|
|
5
|
-
href?: string;
|
|
5
|
+
href?: string | null;
|
|
6
6
|
ariaLabel?: string;
|
|
7
7
|
width?: string;
|
|
8
8
|
height?: string;
|
|
@@ -10,15 +10,15 @@
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
let {
|
|
13
|
-
href =
|
|
14
|
-
ariaLabel = '
|
|
13
|
+
href = null,
|
|
14
|
+
ariaLabel = 'Iroco Logo',
|
|
15
15
|
width = '5rem',
|
|
16
16
|
height = '5rem',
|
|
17
17
|
color = Color.green
|
|
18
18
|
}: Props = $props();
|
|
19
19
|
</script>
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
{#snippet irocoSvg()}
|
|
22
22
|
<svg {width} {height} viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
23
23
|
<path
|
|
24
24
|
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"
|
|
@@ -29,4 +29,12 @@
|
|
|
29
29
|
fill={color}
|
|
30
30
|
/>
|
|
31
31
|
</svg>
|
|
32
|
-
|
|
32
|
+
{/snippet}
|
|
33
|
+
|
|
34
|
+
{#if href != null}
|
|
35
|
+
<a class="iroco-logo" {href} aria-label={ariaLabel}>
|
|
36
|
+
{@render irocoSvg()}
|
|
37
|
+
</a>
|
|
38
|
+
{:else}
|
|
39
|
+
{@render irocoSvg()}
|
|
40
|
+
{/if}
|
package/dist/IrocoLogo.svelte
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
interface Props {
|
|
3
|
-
href?: string;
|
|
3
|
+
href?: string | null;
|
|
4
4
|
ariaLabel?: string;
|
|
5
5
|
width?: string;
|
|
6
6
|
height?: string;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
let {
|
|
10
|
-
href =
|
|
11
|
-
ariaLabel = '
|
|
10
|
+
href = null,
|
|
11
|
+
ariaLabel = 'Iroco Logo',
|
|
12
12
|
width = '10rem',
|
|
13
13
|
height = '10rem'
|
|
14
14
|
}: Props = $props();
|
|
15
15
|
</script>
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
{#snippet irocoSvg()}
|
|
18
18
|
<svg viewBox="0 0 832.33 249.52" role="img" {width} {height}>
|
|
19
19
|
<title>Iroco Logo</title>
|
|
20
20
|
<path
|
|
@@ -53,4 +53,12 @@
|
|
|
53
53
|
transform="translate(-0.44 -0.49)"
|
|
54
54
|
/>
|
|
55
55
|
</svg>
|
|
56
|
-
|
|
56
|
+
{/snippet}
|
|
57
|
+
|
|
58
|
+
{#if href != null}
|
|
59
|
+
<a class="iroco-logo" {href} aria-label={ariaLabel}>
|
|
60
|
+
{@render irocoSvg()}
|
|
61
|
+
</a>
|
|
62
|
+
{:else}
|
|
63
|
+
{@render irocoSvg()}
|
|
64
|
+
{/if}
|
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
<Story name="Sidebar" args={{ type: 'sidebar' }} />
|
|
39
39
|
<Story name="Title" args={{ title: 'Alternative title' }} />
|
|
40
40
|
<Story name="Color" args={{ color: '#ABCDEF' }} />
|
|
41
|
+
<Story name="BaseUrl" args={{ baseUrl: '/' }} />
|
|
41
42
|
<Story
|
|
42
43
|
name="Active"
|
|
43
44
|
args={{
|
package/dist/Navigation.svelte
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { IconBurger, IconIrocoLogo, IrocoLogo, NavBar } from './';
|
|
5
5
|
|
|
6
6
|
interface Props {
|
|
7
|
-
baseUrl?: string;
|
|
7
|
+
baseUrl?: string | null;
|
|
8
8
|
navigationItems: Array<NavigationItem>;
|
|
9
9
|
type?: 'sidebar' | 'topbar';
|
|
10
10
|
title?: string | null;
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
let {
|
|
17
|
-
baseUrl =
|
|
17
|
+
baseUrl = null,
|
|
18
18
|
navigationItems,
|
|
19
19
|
type = 'topbar',
|
|
20
20
|
title = null,
|
|
@@ -24,15 +24,16 @@
|
|
|
24
24
|
}: Props = $props();
|
|
25
25
|
|
|
26
26
|
let showMenu = $state(false);
|
|
27
|
-
let href = $derived(`${baseUrl}/`);
|
|
27
|
+
let href = $derived(baseUrl != null ? `${baseUrl}/` : null);
|
|
28
|
+
let ariaLabel = $derived(baseUrl != null ? 'go to Iroco home' : null);
|
|
28
29
|
</script>
|
|
29
30
|
|
|
30
31
|
<div class="navigation--mobile">
|
|
31
32
|
<div class="navigation--mobile__title-container">
|
|
32
33
|
{#if title == null}
|
|
33
|
-
<IrocoLogo {href} width="10em" height="
|
|
34
|
+
<IrocoLogo {href} {ariaLabel} width="10em" height="3em" />
|
|
34
35
|
{:else}
|
|
35
|
-
<IconIrocoLogo {href} width="3em" height="3em" {color} />
|
|
36
|
+
<IconIrocoLogo {href} {ariaLabel} width="3em" height="3em" {color} />
|
|
36
37
|
<div class="navigation--mobile__title-container__title">{title}</div>
|
|
37
38
|
{/if}
|
|
38
39
|
</div>
|
|
@@ -56,9 +57,9 @@
|
|
|
56
57
|
<div class="navigation">
|
|
57
58
|
<div class="navigation__title-container">
|
|
58
59
|
{#if title == null}
|
|
59
|
-
<IrocoLogo {href} width="10em" height="
|
|
60
|
+
<IrocoLogo {href} {ariaLabel} width="10em" height="3em" />
|
|
60
61
|
{:else}
|
|
61
|
-
<IconIrocoLogo {href} width="3em" height="3em" />
|
|
62
|
+
<IconIrocoLogo {href} {ariaLabel} width="3em" height="3em" />
|
|
62
63
|
<div class="navigation__title-container__title">{title}</div>
|
|
63
64
|
{/if}
|
|
64
65
|
</div>
|