Merge pull request #2477 from evidence-dev/hotfix-2024-08-30

Hotfix 2024-08-30

.changeset/cold-beds-drop.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Funnel chart's showPercent param should calculate based upon initial value, not total

.changeset/rare-rats-turn.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Reverts tab styling for Buttongroup, which broke Tabs

packages/ui/core-components/package.json

@@ -84,6 +84,7 @@
 		"@storybook/addon-svelte-csf": "^4.1.3",
 		"@storybook/blocks": "^8.1.3",
 		"@storybook/builder-vite": "^8.1.10",
+		"@storybook/jest": "^0.2.3",
 		"@storybook/manager-api": "^8.1.6",
 		"@storybook/svelte": "^8.1.3",
 		"@storybook/sveltekit": "^8.1.3",

packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroup.stories.svelte

@@ -136,39 +136,3 @@
 
 	Current Value: {$inputStore[args.name]}
 </Story>
-
-<Story name="Button Group Styled as Tabs" let:args>
-	<div class="mb-8">
-		<ButtonGroup
-			{...args}
-			preset="dates"
-			title="Default Button Style"
-			name="defaultStyle"
-			color="red"
-		/>
-	</div>
-	Current Value: {$inputStore['defaultStyle']}
-	<div class="mb-8 mt-4">
-		<ButtonGroup
-			{...args}
-			preset="dates"
-			display="tabs"
-			title="Buttons Styled as Tabs"
-			name="tabsStyle"
-		/>
-	</div>
-	Current Value: {$inputStore['tabsStyle']}
-</Story>
-
-<Story name="Hard Coded Entries with Tab Stylings" let:args>
-	<div class="mb-8">
-		<ButtonGroup {...args} display="tabs">
-			<ButtonGroupItem valueLabel="Option 1" value={1} />
-			<ButtonGroupItem valueLabel="Option 2" value={2} />
-			<ButtonGroupItem valueLabel="Option 3" value={3} />
-			<ButtonGroupItem valueLabel="Option 4" value={4} />
-		</ButtonGroup>
-	</div>
-
-	Current Value: {$inputStore[args.name]}
-</Story>

packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroup.svelte

@@ -6,7 +6,7 @@
 	import { presets, setButtonGroupContext } from './lib.js';
 	import { writable, readonly } from 'svelte/store';
 	import { INPUTS_CONTEXT_KEY } from '@evidence-dev/component-utilities/globalContexts';
-	import { getContext, setContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import { buildReactiveInputQuery } from '@evidence-dev/component-utilities/buildQuery';
 	import ButtonGroupItem from './ButtonGroupItem.svelte';
 	import { page } from '$app/stores';
@@ -22,13 +22,6 @@
 	/** @type {keyof typeof presets | undefined} */
 	export let preset = undefined;
 
-	// for Tabs styling
-	export let display;
-
-	setContext('button-display', display);
-
-	export let color = 'hsla(207, 65%, 39%, 1)';
-
 	const inputs = getContext(INPUTS_CONTEXT_KEY);
 
 	const valueStore = writable(null);
@@ -56,36 +49,29 @@
 </script>
 
 <HiddenInPrint enabled={hideDuringPrint}>
-	<div
-		class={display === 'tabs' ? '' : 'inline-flex w-fit max-w-full flex-col mt-2 mb-4 ml-0 mr-2'}
-	>
+	<div class="inline-flex w-fit max-w-full flex-col mt-2 mb-4 ml-0 mr-2">
 		{#if title}
 			<span class="text-gray-900 text-sm block mb-1">{title}</span>
 		{/if}
-		<div
-			class={display === 'tabs'
-				? 'my-6 flex flex-wrap gap-x-1 gap-y-1'
-				: 'inline-flex rounded-md shadow-sm overflow-auto border no-scrollbar'}
-			role="group"
-		>
+		<div class="inline-flex rounded-md shadow-sm overflow-auto border no-scrollbar" role="group">
 			{#if preset}
 				{#if presets[preset]}
 					{#each presets[preset] as { value, valueLabel }}
-						<ButtonGroupItem {value} {valueLabel} {color} {display} />
+						<ButtonGroupItem {value} {valueLabel} />
 					{/each}
 				{:else}
 					<span class="text-red-500 font-bold text-sm">{preset} is not a valid preset</span>
 				{/if}
 			{:else}
-				<slot {display} />
+				<slot />
 				{#if hasQuery}
 					<QueryLoad data={query} let:loaded>
 						<svelte:fragment slot="skeleton">
 							<div class="h-8 min-w-24 w-full max-width-24 block animate-pulse bg-gray-200" />
 						</svelte:fragment>
 						<svelte:fragment>
 							{#each loaded as { label, value }}
-								<ButtonGroupItem {value} valueLabel={label} {color} {display} />
+								<ButtonGroupItem {value} valueLabel={label} />
 							{/each}
 						</svelte:fragment>
 					</QueryLoad>

packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroupItem.svelte

@@ -4,15 +4,10 @@
 
 <script>
 	import { getButtonGroupContext } from './lib.js';
-	import { getContext } from 'svelte';
 	/** @type {string} */
-	import TabDisplay from '../../../unsorted/ui/Tabs/TabDisplay.svelte';
 	export let valueLabel;
 	/** @type {string | boolean | number | Date} */
 	export let value;
-	export let color = 'hsla(207, 65%, 39%, 1)';
-
-	let display = getContext('button-display');
 
 	const { update, value: currentValue } = getButtonGroupContext();
 
@@ -25,26 +20,16 @@
 	}
 </script>
 
-{#if display === 'tabs'}
-	<TabDisplay
-		id={value}
-		label={valueLabel}
-		{color}
-		on:click={() => update({ valueLabel, value })}
-		activeId={$currentValue?.value}
-	/>
-{:else}
-	<button
-		type="button"
-		class=" flex-none py-1 font-medium h-8 px-3 text-xs truncate
-		border-r last:border-none
-		hover:bg-gray-100 focus:z-10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400
-		{$currentValue?.value === value
-			? 'z-10 border-gray-200 bg-gray-100 text-blue-700'
-			: 'z-0 bg-white text-gray-900 border-gray-200'}
+<button
+	type="button"
+	class=" flex-none py-1 font-medium h-8 px-3 text-xs truncate
+                                border-r last:border-none
+                                hover:bg-gray-100 focus:z-10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400
+                                {$currentValue?.value === value
+		? 'z-10 border-gray-200 bg-gray-100 text-blue-700'
+		: 'z-0 bg-white text-gray-900 border-gray-200'}
                                 "
-		on:click={() => update({ valueLabel, value })}
-	>
-		{valueLabel}
-	</button>
-{/if}
+	on:click={() => update({ valueLabel, value })}
+>
+	{valueLabel}
+</button>

packages/ui/core-components/src/lib/unsorted/ui/Tabs/Tabs.stories.svelte

@@ -16,6 +16,8 @@
 	import { Query } from '@evidence-dev/sdk/usql';
 	import Tab from './Tab.svelte';
 	import TextInput from '../../../atoms/inputs/text/TextInput.svelte';
+	import { within, userEvent } from '@storybook/testing-library';
+	import { expect } from '@storybook/jest';
 
 	const inputStore = writable({});
 	setContext(INPUTS_CONTEXT_KEY, inputStore);
@@ -52,3 +54,29 @@
 		{/each}
 	</Tabs>
 </Story>
+
+<Story
+	name="Click on a second tab"
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		// Wait for the component to render
+		await new Promise((resolve) => setTimeout(resolve, 100));
+
+		// Find the second tab by its id
+		const secondTab = canvas.getByRole('button', { name: 'Tab 2' });
+
+		// Click on the second tab
+		await userEvent.click(secondTab);
+
+		// Check if the second tab's content is visible
+		const secondTabContent = canvas.getByText('Tab 2 content');
+		expect(secondTabContent).toBeVisible();
+	}}
+>
+	<Tabs>
+		<Tab label="Tab 1" id="tab1">Tab 1 content</Tab>
+		<Tab label="Tab 2" id="tab2">Tab 2 content</Tab>
+		<Tab label="Tab 3" id="tab3">Tab 3 content</Tab>
+	</Tabs>
+</Story>

packages/ui/core-components/src/lib/unsorted/ui/Tabs/Tabs.svelte

@@ -5,10 +5,55 @@
 <script>
 	import { onMount, setContext } from 'svelte';
 	import { writable } from 'svelte/store';
-	import TabDisplay from './TabDisplay.svelte';
 
+	const classes = {
+		notActive:
+			'border-gray-100 text-gray-600 border-b-2 bg-gray-50 border-b-gray-200 hover:text-gray-800 hover:bg-gray-200 hover:border-b-gray-400',
+		active: 'text-black border-b-2 border-[--borderColor] bg-[--bgColor]'
+	};
+
+	/**
+	 * id can be provided to enable tab selection to persist across reloads (e.g. with query params)
+	 * @type {string}
+	 */
 	export let id;
+
+	/**
+	 * color can be provided to set custom background color for active tab.
+	 * @type {string}
+	 */
 	export let color = 'hsla(207, 65%, 39%, 1)';
+	color = color.replace(/\s+/g, ''); // clean string
+
+	const bgColor = isValidColorString(color) ? addOpacityToColor(color) : 'hsla(207, 65%, 39%, 0.1)';
+	const borderColor = isValidColorString(color) ? color : 'hsla(207, 65%, 39%, 1)';
+
+	function isHex(inputColor) {
+		const hexRegex = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/i;
+		return hexRegex.test(inputColor);
+	}
+
+	function isRGB(inputColor) {
+		const rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
+		return rgbRegex.test(inputColor);
+	}
+
+	function isHSL(inputColor) {
+		const hslRegex = /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3}%)\s*,\s*(\d{1,3}%)\s*\)$/i;
+		return hslRegex.test(inputColor);
+	}
+
+	function isValidColorString(inputColor) {
+		return isHex(inputColor) || isRGB(inputColor) || isHSL(inputColor);
+	}
+
+	function addOpacityToColor(colorString) {
+		if (isHex(colorString)) {
+			return colorString + '1a';
+		} else if (isRGB(colorString) || isHSL(colorString)) {
+			return colorString.replace(/(\)|\s|$)/, ', 0.1$1');
+		}
+	}
 
 	/** @type {import('./index.d.ts').TabsContext} */
 	const context = writable({ tabs: [], active: null });
@@ -21,39 +66,40 @@
 		}
 	});
 
+	// Select the first tab by default
 	$: if (!$context.activeId && $context.tabs.length) {
 		$context.activeId = $context.tabs[0].id;
 	}
 
+	// Select the first tab when the active tab no longer exists
 	$: if (!$context.tabs.find((t) => t.id === $context.activeId)) {
 		$context.activeId = $context.tabs[0]?.id;
 	}
 
 	$: if ($context.activeId && id) {
+		// Keep the Query in sync
 		const url = new URL(window.location.href);
 		url.searchParams.set(id, $context.activeId);
 		history.replaceState({}, '', url);
 	}
 
 	setContext('TABS_STORE', context);
-
-	const handleTabClick = (event) => {
-		$context.activeId = event.detail.id;
-	};
 </script>
 
 <section>
 	<nav class="my-6 flex flex-wrap gap-x-1 gap-y-1">
 		{#each $context.tabs as tab}
-			<TabDisplay
-				id={tab.id}
-				label={tab.label}
-				{color}
-				activeId={$context.activeId}
-				on:click={handleTabClick}
+			<button
+				style:--bgColor={bgColor}
+				style:--borderColor={borderColor}
+				on:click={() => ($context.activeId = tab.id)}
+				class="mt-2 p-2 rounded-t flex-1 text-sm font-sans whitespace-nowrap transition ease-in duration-200 active:bg-gray-100 {$context.activeId ===
+				tab.id
+					? classes.active
+					: classes.notActive}"
 			>
-				<slot />
-			</TabDisplay>
+				{tab.label}
+			</button>
 		{/each}
 	</nav>
 	<div class="text-base">

packages/ui/core-components/src/lib/unsorted/viz/funnel/_FunnelChart.svelte

@@ -169,7 +169,9 @@
 				formatter: function (params) {
 					let output;
 					if (showPercent) {
-						output = `${formatValue(params.value, valueColFormat)} (${params.percent}%)`;
+						const initialValue = data[0][valueCol];
+						const percentOfInitial = ((params.value / initialValue) * 100).toFixed(2);
+						output = `${formatValue(params.value, valueColFormat)} (${percentOfInitial}%)`;
 					} else {
 						output = formatValue(params.value, valueColFormat);
 					}