From 189277003236215b81f8c18a190ef70d61b72f9f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 19 Jan 2023 19:52:49 +0000
Subject: [PATCH] Fix links not working with click handlers

---
 .../src/FancyForm/FancyButtonRadio.svelte     | 63 +++++++++++++++++++
 packages/bbui/src/Link/Link.svelte            |  2 +-
 2 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 packages/bbui/src/FancyForm/FancyButtonRadio.svelte

diff --git a/packages/bbui/src/FancyForm/FancyButtonRadio.svelte b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte
new file mode 100644
index 0000000000..0fe9131a0b
--- /dev/null
+++ b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte
@@ -0,0 +1,63 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
+
+  export let label
+  export let value
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+
+  $: placeholder = !value
+
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+
+  const onChange = newValue => {
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+  }
+</script>
+
+<FancyField {error} {value} {validate} {disabled}>
+  {#if label}
+    <FancyFieldLabel placeholder={false}>{label}</FancyFieldLabel>
+  {/if}
+
+  <div class="options">
+    {#each options as option}
+      <ActionButton
+        selected={getOptionValue(option) === value}
+        size="S"
+        on:click={() => onChange(getOptionValue(option))}
+      >
+        {getOptionLabel(option)}
+      </ActionButton>
+    {/each}
+  </div>
+</FancyField>
+
+<style>
+  .options {
+    margin-top: 22px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 6px;
+  }
+</style>
diff --git a/packages/bbui/src/Link/Link.svelte b/packages/bbui/src/Link/Link.svelte
index 8ad722d553..ea9496ba72 100644
--- a/packages/bbui/src/Link/Link.svelte
+++ b/packages/bbui/src/Link/Link.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <a
-  on:click={e => e.stopPropagation() && dispatch(e)}
+  on:click={e => dispatch("click") && e.stopPropagation()}
   {href}
   {target}
   {download}