rework logo component APIs

ryanatkn · Apr 14, 2024 · 9222875 · 9222875
1 parent 9ce716a
commit 9222875
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 45 deletions.
diff --git a/.changeset/fluffy-years-argue.md b/.changeset/fluffy-years-argue.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": minor
+---
+
+rework logo component APIs
diff --git a/src/lib/Fuz_Logo.svelte b/src/lib/Fuz_Logo.svelte
@@ -1,28 +1,20 @@
 <script lang="ts">
-	import {base} from '$app/paths';
-
 	import Spider from '$lib/Spider.svelte';
 
 	// TODO think about this API
 	interface Props {
 		size?: string;
-		image?: boolean;
-		src?: string;
-		alt?: string;
+		label?: string;
 	}
 
-	const {size, image = false, src, alt = 'the Fuz logo, a little brown spider'}: Props = $props();
+	const {size, label = 'the Fuz logo, a little brown spider'}: Props = $props();
 
 	// color:
 	// #6a3e1b
 	// hsl(27, 60%, 26%)
 	// rgb(106, 62, 27)
 </script>
 
-{#if image}<img src={src ?? `${base}/favicon.png`} {alt} width={size} height={size} />{:else}<span
-		aria-label={alt}
-		style:--color="var(--color_f_5)"
-		class="inline_block"
-		style:width={size}
-		style:height={size}><Spider /></span
-	>{/if}
+<span style:--color="var(--color_f_5)" class="inline_block" style:width={size} style:height={size}
+	><Spider {label} /></span
+>
diff --git a/src/lib/Fuz_Template_Logo.svelte b/src/lib/Fuz_Template_Logo.svelte
@@ -4,10 +4,10 @@
 	// TODO think about this API
 	interface Props {
 		size?: string;
-		alt?: string;
+		label?: string;
 	}
 
-	const {size, alt = 'the fuz_template logo, a little purple spider'}: Props = $props();
+	const {size, label = 'the fuz_template logo, a little purple spider'}: Props = $props();
 
 	// color:
 	// #6a40bf
@@ -16,10 +16,6 @@
 </script>
 
 <!-- TODO could potentially support the `image` option like `Fuz_Logo` -->
-<span
-	aria-label={alt}
-	style:--color="var(--color_d_5)"
-	class="inline_block"
-	style:width={size}
-	style:height={size}><Spider /></span
+<span style:--color="var(--color_d_5)" class="inline_block" style:width={size} style:height={size}
+	><Spider {label} /></span
 >
diff --git a/src/lib/Moss_Logo.svelte b/src/lib/Moss_Logo.svelte
@@ -4,10 +4,10 @@
 	// TODO think about this API
 	interface Props {
 		size?: string;
-		alt?: string;
+		label?: string;
 	}
 
-	const {size, alt = 'the Moss logo, a fuzzy tuft of green moss'}: Props = $props();
+	const {size, label = 'the Moss logo, a fuzzy tuft of green moss'}: Props = $props();
 
 	// TODO publish a plain SVG probably
 
@@ -17,12 +17,8 @@
 	// rgb(41, 142, 41)
 </script>
 
-<span
-	aria-label={alt}
-	style:--color="var(--color_b_5)"
-	class="inline_block"
-	style:width={size}
-	style:height={size}><Spider /></span
+<span style:--color="var(--color_b_5)" class="inline_block" style:width={size} style:height={size}
+	><Spider {label} /></span
 >
 
 <style>

diff --git a/src/lib/Spiderspace_Logo.svelte b/src/lib/Spiderspace_Logo.svelte
@@ -4,10 +4,10 @@
 	// TODO think about this API
 	interface Props {
 		size?: string;
-		alt?: string;
+		label?: string;
 	}
 
-	const {size, alt = 'the Spiderspace logo, a little yellow spider'}: Props = $props();
+	const {size, label = 'the Spiderspace logo, a little yellow spider'}: Props = $props();
 
 	// color:
 	// #b19a25
@@ -16,10 +16,6 @@
 </script>
 
 <!-- TODO could potentially support the `image` option like `Fuz_Logo` -->
-<span
-	aria-label={alt}
-	style:--color="var(--color_e_5)"
-	class="inline_block"
-	style:width={size}
-	style:height={size}><Spider /></span
+<span style:--color="var(--color_e_5)" class="inline_block" style:width={size} style:height={size}
+	><Spider {label} /></span
 >
diff --git a/src/lib/Zzz_Logo.svelte b/src/lib/Zzz_Logo.svelte
@@ -4,10 +4,10 @@
 	// TODO think about this API
 	interface Props {
 		size?: string;
-		alt?: string;
+		label?: string;
 	}
 
-	const {size, alt = 'the Zzz logo, a little pink spider'}: Props = $props();
+	const {size, label = 'the Zzz logo, a little pink spider'}: Props = $props();
 
 	// color:
 	// #e03e81
@@ -16,10 +16,6 @@
 </script>
 
 <!-- TODO could potentially support the `image` option like `Fuz_Logo` -->
-<span
-	aria-label={alt}
-	style:--color="var(--color_g_5)"
-	class="inline_block"
-	style:width={size}
-	style:height={size}><Spider /></span
+<span style:--color="var(--color_g_5)" class="inline_block" style:width={size} style:height={size}
+	><Spider {label} /></span
 >