From 933e891f85402e2dce3f718f3020e0c351d51370 Mon Sep 17 00:00:00 2001
From: Kyle Wong <kyle.wong917@gmail.com>
Date: Wed, 19 Jun 2024 20:09:32 -0400
Subject: [PATCH 1/6] Added detail url link

Co-authored-by: Brian D  <contact@noimbrian.com>
---
 .../lib/unsorted/viz/core/_BigValue.svelte    | 17 ++++++++++
 sites/docs/pages/components/testing.md        | 31 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 sites/docs/pages/components/testing.md

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
index d5892706d4..912b7fae03 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
@@ -40,6 +40,11 @@
 	let positive = true;
 	let comparisonColor = 'var(--grey-700)';
 
+	/** @type {string}*/
+	export let url = undefined;
+
+	let chartType = 'Big Value';
+
 	let error = undefined;
 	$: try {
 		error = undefined;
@@ -143,4 +148,16 @@
 			{/if}
 		{/if}
 	{/if}
+	{#if url}
+		<a href={url}
+			><div
+				class="flex items-center w-fit m-1 ml-0 mr-0 pr-[1.25px] border-b border-transparent hover:border-gray-500"
+			>
+				<svg viewBox="1 4.5 14 14" fill="currentColor" width="10" height="10">
+					<path d="M9 6l6 6-6 6V6z" transform="translate(-7, 0)" />
+				</svg>
+				<span style="font-size: 10px; margin:0px;">Details</span>
+			</div>
+		</a>
+	{/if}
 </div>
diff --git a/sites/docs/pages/components/testing.md b/sites/docs/pages/components/testing.md
new file mode 100644
index 0000000000..b7a3a68c58
--- /dev/null
+++ b/sites/docs/pages/components/testing.md
@@ -0,0 +1,31 @@
+---
+title: testing
+sidebar_position: 999999
+queries: 
+- orders_with_comparisons.sql
+---
+
+Big Value displays a large value, and can be configured to include a comparison and a sparkline.
+
+
+<BigValue 
+  data={orders_with_comparisons} 
+  value=num_orders
+  sparkline=month
+  comparison=order_growth
+  comparisonFmt=pct1
+  comparisonTitle="vs. Last Month"
+  url='/components/big-value/'
+/>
+
+
+
+```sql orders
+Select sum(sales) as total_sales FROM needful_things.orders
+```
+
+```sql fares
+Select sum(fare) as total_fares FROM memory.series_demo_source.flights
+```
+
+<BigValue data={orders} value=total_sales />
\ No newline at end of file

From 0bb7718a220860e18661a34696e6d1a594bbce5f Mon Sep 17 00:00:00 2001
From: Kyle Wong <kyle.wong917@gmail.com>
Date: Wed, 19 Jun 2024 20:23:21 -0400
Subject: [PATCH 2/6] formatted and linted, updated docs, changeset added

---
 .changeset/brave-students-joke.md             |  5 ++++
 .../lib/unsorted/viz/core/_BigValue.svelte    |  8 ++---
 sites/docs/pages/components/big-value.md      | 30 ++++++++++++++++++-
 sites/docs/pages/components/testing.md        |  2 +-
 4 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/brave-students-joke.md

diff --git a/.changeset/brave-students-joke.md b/.changeset/brave-students-joke.md
new file mode 100644
index 0000000000..5325ea72f5
--- /dev/null
+++ b/.changeset/brave-students-joke.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Added url prop to Big value Component
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
index 912b7fae03..c0e3d1d217 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
@@ -41,9 +41,7 @@
 	let comparisonColor = 'var(--grey-700)';
 
 	/** @type {string}*/
-	export let url = undefined;
-
-	let chartType = 'Big Value';
+	export let href = undefined;
 
 	let error = undefined;
 	$: try {
@@ -148,8 +146,8 @@
 			{/if}
 		{/if}
 	{/if}
-	{#if url}
-		<a href={url}
+	{#if href}
+		<a {href}
 			><div
 				class="flex items-center w-fit m-1 ml-0 mr-0 pr-[1.25px] border-b border-transparent hover:border-gray-500"
 			>
diff --git a/sites/docs/pages/components/big-value.md b/sites/docs/pages/components/big-value.md
index 5385e44210..05e6a8340f 100644
--- a/sites/docs/pages/components/big-value.md
+++ b/sites/docs/pages/components/big-value.md
@@ -123,7 +123,31 @@ Multiple cards will align themselves into a row.
   comparisonTitle="MoM"
 />
 ```
+### Linking to other pages
 
+href can be used to link to external or internal pages
+
+<BigValue 
+  data={orders_with_comparisons} 
+  value=num_orders
+  sparkline=month
+  comparison=order_growth
+  comparisonFmt=pct1
+  comparisonTitle="vs. Last Month"
+  href='/components/big-value/'
+/>
+
+```html
+<BigValue 
+  data={orders_with_comparisons} 
+  value=num_orders
+  sparkline=month
+  comparison=order_growth
+  comparisonFmt=pct1
+  comparisonTitle="vs. Last Month"
+  href='/components/big-value/'
+/>
+```
 
 ### Non-Delta Comparisons
 
@@ -154,7 +178,6 @@ Multiple cards will align themselves into a row.
   sparkline=month
 />
 
-
 ## Options
 
 ### Data
@@ -206,6 +229,11 @@ Multiple cards will align themselves into a row.
     defaultValue="No records"
 />
 
+<PropListing name="href">
+
+The URL to use for the link. Can be a full external link like `https://google.com` or an internal link like `/sales/performance`
+</PropListing>
+
 ### Comparison Options
 
 <PropListing
diff --git a/sites/docs/pages/components/testing.md b/sites/docs/pages/components/testing.md
index b7a3a68c58..b793b64b3b 100644
--- a/sites/docs/pages/components/testing.md
+++ b/sites/docs/pages/components/testing.md
@@ -15,7 +15,7 @@ Big Value displays a large value, and can be configured to include a comparison
   comparison=order_growth
   comparisonFmt=pct1
   comparisonTitle="vs. Last Month"
-  url='/components/big-value/'
+  href='/components/big-value/'
 />
 
 

From e8b7eabddeb1c16295fbb81765654a2aa6b4035d Mon Sep 17 00:00:00 2001
From: Kyle Wong <kyle.wong917@gmail.com>
Date: Thu, 20 Jun 2024 10:10:40 -0400
Subject: [PATCH 3/6] updated Docs and Component props href to url

---
 .../lib/unsorted/viz/core/_BigValue.svelte    |  8 ++---
 sites/docs/pages/components/big-value.md      |  8 ++---
 sites/docs/pages/components/testing.md        | 31 -------------------
 3 files changed, 8 insertions(+), 39 deletions(-)
 delete mode 100644 sites/docs/pages/components/testing.md

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
index c0e3d1d217..048816c9af 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
@@ -41,7 +41,7 @@
 	let comparisonColor = 'var(--grey-700)';
 
 	/** @type {string}*/
-	export let href = undefined;
+	export let url = undefined;
 
 	let error = undefined;
 	$: try {
@@ -146,9 +146,9 @@
 			{/if}
 		{/if}
 	{/if}
-	{#if href}
-		<a {href}
-			><div
+	{#if url}
+		<a href={url}>
+			<div
 				class="flex items-center w-fit m-1 ml-0 mr-0 pr-[1.25px] border-b border-transparent hover:border-gray-500"
 			>
 				<svg viewBox="1 4.5 14 14" fill="currentColor" width="10" height="10">
diff --git a/sites/docs/pages/components/big-value.md b/sites/docs/pages/components/big-value.md
index 05e6a8340f..ff8591548b 100644
--- a/sites/docs/pages/components/big-value.md
+++ b/sites/docs/pages/components/big-value.md
@@ -125,7 +125,7 @@ Multiple cards will align themselves into a row.
 ```
 ### Linking to other pages
 
-href can be used to link to external or internal pages
+url can be used to link to external or internal pages
 
 <BigValue 
   data={orders_with_comparisons} 
@@ -134,7 +134,7 @@ href can be used to link to external or internal pages
   comparison=order_growth
   comparisonFmt=pct1
   comparisonTitle="vs. Last Month"
-  href='/components/big-value/'
+  url='/components/big-value/'
 />
 
 ```html
@@ -145,7 +145,7 @@ href can be used to link to external or internal pages
   comparison=order_growth
   comparisonFmt=pct1
   comparisonTitle="vs. Last Month"
-  href='/components/big-value/'
+  url='/components/big-value/'
 />
 ```
 
@@ -229,7 +229,7 @@ href can be used to link to external or internal pages
     defaultValue="No records"
 />
 
-<PropListing name="href">
+<PropListing name="url">
 
 The URL to use for the link. Can be a full external link like `https://google.com` or an internal link like `/sales/performance`
 </PropListing>
diff --git a/sites/docs/pages/components/testing.md b/sites/docs/pages/components/testing.md
deleted file mode 100644
index b793b64b3b..0000000000
--- a/sites/docs/pages/components/testing.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: testing
-sidebar_position: 999999
-queries: 
-- orders_with_comparisons.sql
----
-
-Big Value displays a large value, and can be configured to include a comparison and a sparkline.
-
-
-<BigValue 
-  data={orders_with_comparisons} 
-  value=num_orders
-  sparkline=month
-  comparison=order_growth
-  comparisonFmt=pct1
-  comparisonTitle="vs. Last Month"
-  href='/components/big-value/'
-/>
-
-
-
-```sql orders
-Select sum(sales) as total_sales FROM needful_things.orders
-```
-
-```sql fares
-Select sum(fare) as total_fares FROM memory.series_demo_source.flights
-```
-
-<BigValue data={orders} value=total_sales />
\ No newline at end of file

From d57992cc7d941125e46d4ace420d8af66421aa6b Mon Sep 17 00:00:00 2001
From: Kyle Wong <kyle.wong917@gmail.com>
Date: Thu, 20 Jun 2024 16:42:45 -0400
Subject: [PATCH 4/6] added conditonal rendering to wrap value component in a
 anchor tag

---
 .../lib/unsorted/viz/core/_BigValue.svelte    | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
index 048816c9af..bbbd83359f 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
@@ -40,8 +40,8 @@
 	let positive = true;
 	let comparisonColor = 'var(--grey-700)';
 
-	/** @type {string}*/
-	export let url = undefined;
+	/** @type {string | null}*/
+	export let url = null;
 
 	let error = undefined;
 	$: try {
@@ -106,7 +106,13 @@
 	{:else}
 		<p class="text-sm text-gray-700">{title}</p>
 		<div class="relative text-xl font-medium text-gray-700 my-0.5">
-			<Value {data} column={value} {fmt} />
+			{#if url}
+				<a class="hover:bg-gray-100" href={url}>
+					<Value {data} column={value} {fmt} />
+				</a>
+			{:else}
+				<Value {data} column={value} {fmt} />
+			{/if}
 			{#if sparkline}
 				<Sparkline
 					height="15"
@@ -140,22 +146,16 @@
 				</p>
 			{:else}
 				<p class="text-xs font-sans text-gray-500 pt-[0.5px]">
-					<Value {data} column={comparison} fmt={comparisonFmt} />
+					{#if url}
+						<a class="hover:bg-gray-100" href={url}>
+							<Value {data} column={comparison} fmt={comparisonFmt} />
+						</a>
+					{:else}
+						<Value {data} column={comparison} fmt={comparisonFmt} />
+					{/if}
 					<span>{comparisonTitle}</span>
 				</p>
 			{/if}
 		{/if}
 	{/if}
-	{#if url}
-		<a href={url}>
-			<div
-				class="flex items-center w-fit m-1 ml-0 mr-0 pr-[1.25px] border-b border-transparent hover:border-gray-500"
-			>
-				<svg viewBox="1 4.5 14 14" fill="currentColor" width="10" height="10">
-					<path d="M9 6l6 6-6 6V6z" transform="translate(-7, 0)" />
-				</svg>
-				<span style="font-size: 10px; margin:0px;">Details</span>
-			</div>
-		</a>
-	{/if}
 </div>

From 3b2bf8042864a0777766a82bbd6d61ed0a78be03 Mon Sep 17 00:00:00 2001
From: Kyle Wong <kyle.wong917@gmail.com>
Date: Fri, 21 Jun 2024 10:24:46 -0400
Subject: [PATCH 5/6] updated prop to from url to link, added description in
 link example

---
 .../src/lib/unsorted/viz/core/_BigValue.svelte       | 10 +++++-----
 sites/docs/pages/components/big-value.md             | 12 +++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
index bbbd83359f..f4b57951a9 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/core/_BigValue.svelte
@@ -41,7 +41,7 @@
 	let comparisonColor = 'var(--grey-700)';
 
 	/** @type {string | null}*/
-	export let url = null;
+	export let link = null;
 
 	let error = undefined;
 	$: try {
@@ -106,8 +106,8 @@
 	{:else}
 		<p class="text-sm text-gray-700">{title}</p>
 		<div class="relative text-xl font-medium text-gray-700 my-0.5">
-			{#if url}
-				<a class="hover:bg-gray-100" href={url}>
+			{#if link}
+				<a class="hover:bg-gray-100" href={link}>
 					<Value {data} column={value} {fmt} />
 				</a>
 			{:else}
@@ -146,8 +146,8 @@
 				</p>
 			{:else}
 				<p class="text-xs font-sans text-gray-500 pt-[0.5px]">
-					{#if url}
-						<a class="hover:bg-gray-100" href={url}>
+					{#if link}
+						<a class="hover:bg-gray-100" href={link}>
 							<Value {data} column={comparison} fmt={comparisonFmt} />
 						</a>
 					{:else}
diff --git a/sites/docs/pages/components/big-value.md b/sites/docs/pages/components/big-value.md
index ff8591548b..5bb67f3b89 100644
--- a/sites/docs/pages/components/big-value.md
+++ b/sites/docs/pages/components/big-value.md
@@ -125,7 +125,7 @@ Multiple cards will align themselves into a row.
 ```
 ### Linking to other pages
 
-url can be used to link to external or internal pages
+link can be used to link to external or internal pages
 
 <BigValue 
   data={orders_with_comparisons} 
@@ -134,7 +134,7 @@ url can be used to link to external or internal pages
   comparison=order_growth
   comparisonFmt=pct1
   comparisonTitle="vs. Last Month"
-  url='/components/big-value/'
+  link='/components/big-value/'
 />
 
 ```html
@@ -145,10 +145,12 @@ url can be used to link to external or internal pages
   comparison=order_growth
   comparisonFmt=pct1
   comparisonTitle="vs. Last Month"
-  url='/components/big-value/'
+  link='/components/big-value/'
 />
 ```
 
+Allows the Value component to be a clickable link tag to other pages.
+
 ### Non-Delta Comparisons
 
 <BigValue 
@@ -229,9 +231,9 @@ url can be used to link to external or internal pages
     defaultValue="No records"
 />
 
-<PropListing name="url">
+<PropListing name="link">
 
-The URL to use for the link. Can be a full external link like `https://google.com` or an internal link like `/sales/performance`
+Used to navigate to other pages. Can be a full external link like `https://google.com` or an internal link like `/sales/performance`
 </PropListing>
 
 ### Comparison Options

From f43b8a9d6f7fb6bd700153ab2139ede710c4de51 Mon Sep 17 00:00:00 2001
From: Kyle Wong <kyle.wong917@gmail.com>
Date: Fri, 21 Jun 2024 10:32:18 -0400
Subject: [PATCH 6/6] updated description for Link

---
 sites/docs/pages/components/big-value.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/sites/docs/pages/components/big-value.md b/sites/docs/pages/components/big-value.md
index 5bb67f3b89..e6660d7375 100644
--- a/sites/docs/pages/components/big-value.md
+++ b/sites/docs/pages/components/big-value.md
@@ -125,7 +125,7 @@ Multiple cards will align themselves into a row.
 ```
 ### Linking to other pages
 
-link can be used to link to external or internal pages
+The link property makes the Value component clickable, allowing navigation to other pages.
 
 <BigValue 
   data={orders_with_comparisons} 
@@ -149,8 +149,6 @@ link can be used to link to external or internal pages
 />
 ```
 
-Allows the Value component to be a clickable link tag to other pages.
-
 ### Non-Delta Comparisons
 
 <BigValue