Update tooltip with modal

.changeset/ppp_ooo_iiii.md

@@ -0,0 +1,6 @@
+---
+'@ldn-viz/ui': minor
+---
+
+CHANGED: add modal support to tooltips.
+CHANGED: update sidebar hint to use a tooltip for its modal option.

packages/ui/src/lib/sidebar/elements/sidebarHint/SidebarHint.stories.svelte

@@ -9,6 +9,22 @@
 			hintType: {
 				options: ['tooltip', 'popover', 'modal'],
 				control: { type: 'radio' }
+			},
+			hintLabel: {
+				type: 'string',
+				control: { type: 'text' }
+			},
+			modalTitle: {
+				type: 'string',
+				control: { type: 'text' }
+			},
+			modalDescription: {
+				type: 'string',
+				control: { type: 'text' }
+			},
+			modalWidth: {
+				options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full'],
+				control: { type: 'select' }
 			}
 		}
 	};
@@ -40,6 +56,44 @@
 	</SidebarHint>
 </Story>
 
+<Story name="Modal description" source>
+	<SidebarHint
+		hintType="modal"
+		modalWidth="lg"
+		modalTitle="Modal with description"
+		modalDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+		labore et dolore magna aliqua."
+	/>
+</Story>
+
+<Story name="Modal slot" source>
+	<SidebarHint hintType="modal" modalWidth="2xl" modalTitle="Modal with slotted content">
+		<div class="space-y-4">
+			<h1 class="text-xl font-medium">Heading</h1>
+			<p>
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+				ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+				laboris nisi ut aliquip ex ea commodo consequat.
+			</p>
+			<p>
+				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.'
+			</p>
+			<p>
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+				ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+				laboris nisi ut aliquip ex ea commodo consequat.
+			</p>
+			<p>
+				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.'
+			</p>
+		</div>
+	</SidebarHint>
+</Story>
+
 <Story name="Tooltip" source>
 	<SidebarHint hintType="tooltip">
 		'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

packages/ui/src/lib/sidebar/elements/sidebarHint/SidebarHint.svelte

@@ -5,7 +5,6 @@
 	 */
 
 	import Tooltip from '../../../tooltip/Tooltip.svelte';
-	import SidebarHintModal from './SidebarHintModal.svelte';
 
 	/**
 	 * Form in which the help text should be displayed.
@@ -57,8 +56,10 @@
 		<slot />
 	</Tooltip>
 {:else if hintType === 'modal'}
-	<SidebarHintModal {hintLabel} {modalTitle} {modalDescription} {modalWidth}>
+	<Tooltip {hintLabel} {modalTitle} {modalDescription} {modalWidth}>
 		<!-- The help message. -->
-		<slot />
-	</SidebarHintModal>
+		<svelte:fragment slot="modal">
+			<slot />
+		</svelte:fragment>
+	</Tooltip>
 {/if}

packages/ui/src/lib/tooltip/Tooltip.stories.svelte

@@ -45,3 +45,10 @@
 		But I still work the same
 	</Tooltip>
 </Story>
+
+<Story name="Toggles modal on click">
+	<Tooltip modalTitle="This is the modal title" modalWidth="xl">
+		Click me!
+		<p slot="modal">This is the modal content in an extra large modal.</p>
+	</Tooltip>
+</Story>

packages/ui/src/lib/tooltip/Tooltip.svelte

@@ -16,23 +16,63 @@
 
 	import Button from '../button/Button.svelte';
 	import { floatingRef } from '../tooltip/tooltip.js';
+	import Modal from '../modal/Modal.svelte';
 
 	/**
-	 * text that appears in the tooltip target, next to the icon
+	 * Text that appears in the tooltip target, next to the icon.
 	 */
 	export let hintLabel = 'what is this?';
 
 	/**
-	 * text size for the tooltip target
+	 * Text size for the tooltip target.
 	 */
 	export let hintSize: 'sm' | 'md' | 'lg' | undefined = undefined;
 
+	/**
+	 * Description that appears below the title of the modal (the
+	 * `aria-describedby` for the modal points to the element containing this
+	 * text). The presence of this property enables modal toggling on tooltip
+	 * click.
+	 */
+	export let modalDescription = '';
+
+	/**
+	 * Title that appears at the top of the modal.
+	 *
+	 * This property is only applicable if a `modalDescription` or a named slot
+	 * called `modal` is provided.
+	 */
+	export let modalTitle = '';
+
+	/**
+	 * Width of the modal.
+	 *
+	 * This property is only applicable if a `modalDescription` or a named slot
+	 * called `modal` is provided.
+	 */
+	export let modalWidth:
+		| 'sm'
+		| 'md'
+		| 'lg'
+		| 'xs'
+		| 'xl'
+		| '2xl'
+		| '3xl'
+		| '4xl'
+		| '5xl'
+		| '6xl'
+		| '7xl'
+		| 'full'
+		| undefined = undefined;
+
 	let showTooltip = false;
 
 	let element: HTMLSpanElement;
 
 	const arrowRef: Writable<HTMLElement> = writable();
 	let dynamicOptions = {};
+
+	// TODO: Needs refactoring into something more readable.
 	$: if (showTooltip) {
 		dynamicOptions = {
 			middleware: [offset(10), flip(), shift(), arrow({ element: arrowRef })],
@@ -53,9 +93,21 @@
 			}
 		};
 	}
+
+	let isModalOpen: Writable<boolean> | undefined;
+	const openModal = () => {
+		if ($$slots.modal) {
+			isModalOpen?.set(true);
+		}
+	};
 </script>
 
-<Button variant="text" size={hintSize} class="!p-0 !text-core-grey-400 dark:!text-core-grey-300">
+<Button
+	variant="text"
+	size={hintSize}
+	class="!p-0 !text-core-grey-400 dark:!text-core-grey-300"
+	on:click={openModal}
+>
 	<span
 		use:floatingRef
 		bind:this={element}
@@ -68,7 +120,7 @@
 		class="inline-flex items-center"
 	>
 		{#if $$slots.hint}
-			<!-- if present, replaces the default `hintLabel` and icon  -->
+			<!-- If present, replaces the default `hintLabel` and icon.  -->
 			<slot name="hint" />
 		{:else}
 			{hintLabel}
@@ -83,12 +135,25 @@
 	</span>
 </Button>
 
+{#if modalDescription || $$slots.modal}
+	<Modal
+		bind:isOpen={isModalOpen}
+		title={modalTitle}
+		description={modalDescription}
+		width={modalWidth}
+	>
+		{#if $$slots.modal}
+			<slot name="modal" />
+		{/if}
+	</Modal>
+{/if}
+
 {#if showTooltip}
 	<div
 		class="absolute max-w-[200px] text-sm p-2 bg-core-grey-100 text-core-grey-700 dark:bg-core-grey-700 dark:text-core-grey-50 shadow-md z-50"
 		use:floatingContent={dynamicOptions}
 	>
-		<!-- the text that will be displayed in the tooltip -->
+		<!-- Text that will be displayed in the tooltip. -->
 		<slot />
 
 		<div