From c7f9fa02d5525fa7b9c112b8ebe94590b990a361 Mon Sep 17 00:00:00 2001
From: Micheal Parks <103450731+micheal-parks@users.noreply.github.com>
Date: Tue, 6 Aug 2024 12:49:04 -0400
Subject: [PATCH] Add tab buttons (#552)

---
 packages/core/package.json            |  2 +-
 packages/core/src/lib/tab.svelte      | 24 +++++++++++++++++-------
 packages/core/src/routes/+page.svelte | 19 +++++++++++++++++++
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 7b302bef..12a67d93 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.140",
+  "version": "0.0.141",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/core/src/lib/tab.svelte b/packages/core/src/lib/tab.svelte
index 65e14fac..1f94051d 100644
--- a/packages/core/src/lib/tab.svelte
+++ b/packages/core/src/lib/tab.svelte
@@ -17,17 +17,17 @@ A clickable element that allows the user to navigate to another page or area.
 import cx from 'classnames';
 import type { HTMLAttributes } from 'svelte/elements';
 import { CONTEXT_KEY } from './tabs-bar.svelte';
-import { getContext } from 'svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import type { Writable } from 'svelte/store';
 
 interface $$Props extends HTMLAttributes<HTMLElement> {
-  href: string;
+  href?: string;
   title: string;
   selected?: boolean;
   class?: string;
 }
 /** The tab's href. */
-export let href: $$Props['href'];
+export let href: $$Props['href'] = undefined;
 
 /** The tab's title. */
 export let title: $$Props['title'];
@@ -35,13 +35,22 @@ export let title: $$Props['title'];
 //* The tab's state */
 export let selected: $$Props['selected'] = false;
 
-const variant = getContext<Writable<'primary' | 'secondary'>>(CONTEXT_KEY);
-
 let className = '';
 export { className as class };
+
+const variant = getContext<Writable<'primary' | 'secondary'>>(CONTEXT_KEY);
+
+const dispatch = createEventDispatcher<{ click: MouseEvent }>();
+
+const onclick = (event: MouseEvent) => {
+  dispatch('click', event);
+};
 </script>
 
-<a
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<svelte:element
+  this={href ? 'a' : 'button'}
+  role="navigation"
   {href}
   aria-current={selected ? 'page' : false}
   class={cx(
@@ -55,6 +64,7 @@ export { className as class };
     },
     className
   )}
+  on:click={onclick}
 >
   {title}
-</a>
+</svelte:element>
diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
index 56c7ac99..d147d711 100644
--- a/packages/core/src/routes/+page.svelte
+++ b/packages/core/src/routes/+page.svelte
@@ -1637,6 +1637,25 @@ const onHoverDelayMsInput = (event: Event) => {
         href="#third"
       />
     </TabsBar>
+
+    <TabsBar
+      aria-label="Tab example two"
+      variant="secondary"
+    >
+      <Tab
+        title="The first tab"
+        selected
+        on:click={() => console.log('first')}
+      />
+      <Tab
+        title="The second tab"
+        on:click={() => console.log('second')}
+      />
+      <Tab
+        title="The third tab"
+        on:click={() => console.log('third')}
+      />
+    </TabsBar>
   </div>
 
   <!-- Toast Banner -->