From a643f75272b04667cc70950372a4bab1f6edfc75 Mon Sep 17 00:00:00 2001
From: Sean Hughes <sean@evidence.dev>
Date: Tue, 31 Dec 2024 12:23:26 -0500
Subject: [PATCH] remove card and add class props

---
 .../src/lib/unsorted/ui/Card.stories.svelte   | 24 -------------------
 .../src/lib/unsorted/ui/Card.svelte           | 14 -----------
 .../src/lib/unsorted/ui/Embed.svelte          | 14 ++++++++---
 .../src/lib/unsorted/ui/Footnote.svelte       | 18 --------------
 .../src/lib/unsorted/ui/Image.svelte          | 15 ++++++++++--
 .../src/lib/unsorted/ui/Link.svelte           |  4 +++-
 ...ote.stories.svelte => Note.stories.svelte} | 22 ++++++++---------
 .../src/lib/unsorted/ui/Note.svelte           | 14 +++++++++++
 .../src/lib/unsorted/ui/index.js              |  3 +--
 9 files changed, 53 insertions(+), 75 deletions(-)
 delete mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Card.stories.svelte
 delete mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Card.svelte
 delete mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Footnote.svelte
 rename packages/ui/core-components/src/lib/unsorted/ui/{Footnote.stories.svelte => Note.stories.svelte} (81%)
 create mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Note.svelte

diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Card.stories.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Card.stories.svelte
deleted file mode 100644
index 02b2ef5075..0000000000
--- a/packages/ui/core-components/src/lib/unsorted/ui/Card.stories.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script context="module">
-	import Card from './Card.svelte';
-
-	/** @type {import("@storybook/svelte").Meta}*/
-	export const meta = {
-		title: 'UI/Card',
-		component: Card
-	};
-</script>
-
-<script>
-	import { Story } from '@storybook/addon-svelte-csf';
-	import { Query } from '@evidence-dev/sdk/usql';
-	import { query } from '@evidence-dev/universal-sql/client-duckdb';
-
-	import BarChart from '../viz/bar/BarChart.svelte';
-</script>
-
-<Story name="All" args={{ x: 'x', y: 'y', series: 'series' }} let:args>
-	{@const data = Query.create(`select * from numeric_series`, query)}
-	<Card>
-		<BarChart {data} {...args} />
-	</Card>
-</Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Card.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Card.svelte
deleted file mode 100644
index 3e47d9a943..0000000000
--- a/packages/ui/core-components/src/lib/unsorted/ui/Card.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script context="module">
-	export const evidenceInclude = true;
-</script>
-
-<script>
-	export let className = '';
-</script>
-
-<div
-	class={`border border-base-400 rounded-md px-3 py-1 shadow-base-200 ${className}`}
-	style="display: inline-block; width: 100%;"
->
-	<slot />
-</div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte
index 59d2449295..cfb37f234f 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte
@@ -3,6 +3,11 @@
 </script>
 
 <script>
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+
 	export let url = ''; // The URL to embed
 	export let title = ''; // A description or title for the embed
 	export let width = '100%'; // Width of the embed, defaults to full width
@@ -19,9 +24,12 @@
 </script>
 
 <div
-	class={`embed-wrapper relative overflow-hidden ${
-		border ? 'border border-gray-300 rounded-md shadow-sm' : ''
-	}`}
+	class={cn(
+		`embed-wrapper relative overflow-hidden ${
+			border ? 'border border-gray-300 rounded-md shadow-sm' : ''
+		}`,
+		className
+	)}
 	style={`width: ${tailwindWidth}; height: ${tailwindHeight};`}
 >
 	<iframe
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Footnote.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Footnote.svelte
deleted file mode 100644
index 4b19368d77..0000000000
--- a/packages/ui/core-components/src/lib/unsorted/ui/Footnote.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script context="module">
-	export const evidenceInclude = true;
-</script>
-
-<script>
-	export let id = ''; // Footnote identifier (number or letter)
-</script>
-
-<div class="block">
-	<div class="inline-flex items-baseline text-xs mb-2 mt-0">
-		<!-- Footnote number -->
-		<sup class="text-gray-500">{id}</sup>
-		<!-- Footnote text -->
-		<div class="text-xs ml-1 text-gray-500 leading-tight">
-			<slot />
-		</div>
-	</div>
-</div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
index cb5f883bf0..e36b8e5233 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
@@ -4,23 +4,34 @@
 
 <script>
 	import { processDimension } from '../../utils.js';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
 
 	export let url = ''; // URL of the image
 	export let description = ''; // Description for accessibility
 	export let width = ''; // Width of the image
 	export let height = ''; // Height of the image
+	export let align = 'center'; // center, left, right
+	const alignMap = {
+		center: 'center',
+		left: 'start',
+		right: 'end'
+	};
+	$: align = alignMap[align] || alignMap['center'];
 
 	// Processed dimensions
 	$: processedWidth = processDimension(width);
 	$: processedHeight = processDimension(height);
 </script>
 
-<div class="flex flex-col items-center text-center">
+<div class="flex flex-col items-{align} text-center">
 	<img
 		src={url}
 		alt={description}
 		style={`width: ${processedWidth}; height: ${processedHeight};`}
-		class="max-w-full h-auto rounded"
+		class={cn('max-w-full h-auto rounded', className)}
 		loading="lazy"
 	/>
 </div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
index 4d038dcc7a..25f4a2f9b3 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
@@ -5,11 +5,13 @@
 <script>
 	import { toBoolean } from '../../utils.js';
 
+	let className = undefined;
+	export { className as class };
+
 	export let url = '#'; // Destination URL
 	export let label = 'Click here'; // Link text
 	export let newTab = false; // Open in a new tab
 	newTab = toBoolean(newTab);
-	export let className = ''; // Additional classes
 </script>
 
 <a
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Footnote.stories.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Note.stories.svelte
similarity index 81%
rename from packages/ui/core-components/src/lib/unsorted/ui/Footnote.stories.svelte
rename to packages/ui/core-components/src/lib/unsorted/ui/Note.stories.svelte
index fc0aaebceb..48512d1f61 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Footnote.stories.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Note.stories.svelte
@@ -1,10 +1,10 @@
 <script context="module">
-	import Footnote from './Footnote.svelte';
+	import Note from './Note.svelte';
 
 	/** @type {import("@storybook/svelte").Meta}*/
 	export const meta = {
-		title: 'UI/Footnote',
-		component: Footnote
+		title: 'UI/Note',
+		component: Note
 	};
 </script>
 
@@ -18,18 +18,18 @@
 
 <Story name="All" args={{ x: 'x', y: 'y', series: 'series' }} let:args>
 	{@const data = Query.create(`select * from numeric_series`, query)}
-	<Footnote id="1">
+	<Note>
 		The data for this report was sourced from the World Bank World Development Indicators dataset.
-	</Footnote>
-	<Footnote id="2">
+	</Note>
+	<Note>
 		The data for this report was sourced from the World Bank World Development Indicators dataset.
-	</Footnote>
-	<Footnote id="3">
+	</Note>
+	<Note>
 		The data for this report was sourced from the World Bank World Development Indicators dataset.
-	</Footnote>
+	</Note>
 	<BarChart {data} {...args} />
-	<Footnote id="1">
+	<Note>
 		The data for this report was sourced from the World Bank World Development Indicators dataset.
-	</Footnote>
+	</Note>
 	<BarChart {data} {...args} />
 </Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte
new file mode 100644
index 0000000000..8325bd69b0
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte
@@ -0,0 +1,14 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('block text-xs text-gray-500 leading-none mt-0 pb-3', className)}>
+	<slot />
+</div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/index.js b/packages/ui/core-components/src/lib/unsorted/ui/index.js
index e87f708b66..046da0db81 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/index.js
+++ b/packages/ui/core-components/src/lib/unsorted/ui/index.js
@@ -1,13 +1,12 @@
 export { default as LinkButton } from './LinkButton.svelte';
 export { default as BigLink } from './BigLink.svelte';
-export { default as Card } from './Card.svelte';
 export { default as ChevronToggle } from './ChevronToggle.svelte';
 export { default as CodeBlock } from './CodeBlock.svelte';
 export { default as Details } from './Details.svelte';
 export { default as DownloadData } from './DownloadData.svelte';
 export { default as EmailSignup } from './EmailSignup.svelte';
 export { default as Embed } from './Embed.svelte';
-export { default as Footnote } from './Footnote.svelte';
+export { default as Note } from './Note.svelte';
 export { default as Group } from './Group.svelte';
 export { default as Image } from './Image.svelte';
 export { default as LastRefreshed } from './LastRefreshed.svelte';