title and subtitle consistency across components

evidence-dev · Jan 3, 2025 · 5ab144e · 5ab144e
1 parent 18ae8a9
commit 5ab144e
Show file tree

Hide file tree

Showing 15 changed files with 189 additions and 10 deletions.
diff --git a/.changeset/tasty-meals-grow.md b/.changeset/tasty-meals-grow.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Title and subtitle consistency across components
diff --git a/packages/ui/core-components/src/lib/molecules/dimension-grid/DimensionGrid.svelte b/packages/ui/core-components/src/lib/molecules/dimension-grid/DimensionGrid.svelte
@@ -20,6 +20,10 @@
 	export let multiple = false;
 	/** @type {string} */
 	export let fmt = undefined;
+	/** @type {string | undefined}*/
+	export let title = undefined;
+	/** @type {string | undefined}*/
+	export let subtitle = undefined;
 
 	const handleLimitNum = () => {
 		try {
@@ -35,9 +39,29 @@
 </script>
 
 <QueryLoad {data} let:loaded>
-	<DimensionGrid data={loaded} {metric} {metricLabel} {limit} {name} {multiple} {fmt} />
+	<DimensionGrid
+		data={loaded}
+		{metric}
+		{metricLabel}
+		{limit}
+		{name}
+		{multiple}
+		{fmt}
+		{title}
+		{subtitle}
+	/>
 	<svelte:fragment let:loaded slot="error">
-		<DimensionGrid data={loaded} {metric} {metricLabel} {limit} {name} {multiple} {fmt} />
+		<DimensionGrid
+			data={loaded}
+			{metric}
+			{metricLabel}
+			{limit}
+			{name}
+			{multiple}
+			{fmt}
+			{title}
+			{subtitle}
+		/>
 	</svelte:fragment>
 	<svelte:fragment slot="skeleton">
 		<!-- No loading state -->

diff --git a/packages/ui/core-components/src/lib/molecules/dimension-grid/_DimensionGrid.svelte b/packages/ui/core-components/src/lib/molecules/dimension-grid/_DimensionGrid.svelte
@@ -3,6 +3,7 @@
 	import { setContext } from 'svelte';
 	import { writable } from 'svelte/store';
 	import DimensionCut from './DimensionCut.svelte';
+	import ComponentTitle from '../../unsorted/viz/core/ComponentTitle.svelte';
 	import { getWhereClause } from './dimensionGridQuery.js';
 	import Alert from '../../atoms/alert/Alert.svelte';
 
@@ -20,6 +21,10 @@
 	export let multiple = false;
 	/** @type {string} */
 	export let fmt = undefined;
+	/** @type {string | undefined}*/
+	export let title = undefined;
+	/** @type {string | undefined}*/
+	export let subtitle = undefined;
 
 	$: dimensions = data?.columns?.filter((col) => col.column_type === 'VARCHAR');
 	let selectedDimensions = writable([]);
@@ -40,6 +45,9 @@
 		{data.error}
 	</Alert>
 {:else}
+	{#if title || subtitle}
+		<ComponentTitle {title} {subtitle} />
+	{/if}
 	<div class="flex flex-nowrap overflow-auto sm:flex-wrap select-none">
 		{#each dimensions as dimension}
 			<DimensionCut {data} {dimension} {metric} {limit} {metricLabel} {multiple} {fmt} />

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/ComponentTitle.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/ComponentTitle.svelte
@@ -0,0 +1,21 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	export let title;
+	export let subtitle;
+</script>
+
+<div class="mt-0 mb-0">
+	{#if title}
+		<h4 class="text-[14px] text-base-heading font-bold mt-0 mb-{subtitle ? '1' : '2'} leading-none">
+			{title}
+		</h4>
+	{/if}
+	{#if subtitle}
+		<p class="text-[13px] text-base-content-muted font-normal mt-0 mb-2">
+			{subtitle}
+		</p>
+	{/if}
+</div>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/PointMap.svelte
@@ -52,6 +52,9 @@
 	/** @type {string|undefined} */
 	export let title = undefined;
 
+	/** @type {string|undefined} */
+	export let subtitle = undefined;
+
 	/** @type {string[]|undefined} */
 	export let colorPalette = undefined;
 	$: colorPaletteStore = resolveColorPalette(colorPalette);
@@ -82,6 +85,7 @@
 	{height}
 	{basemap}
 	{title}
+	{subtitle}
 	{legendPosition}
 	{isInitial}
 	{chartType}

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/_BaseMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/_BaseMap.svelte
@@ -3,13 +3,17 @@
 	import ErrorChart from '../core/ErrorChart.svelte';
 	import EmptyChart from '../core/EmptyChart.svelte';
 	import BaseMap from './BaseMap.svelte';
+	import ComponentTitle from '../../viz/core/ComponentTitle.svelte';
 
 	/** @type {import("@evidence-dev/sdk/usql").QueryValue} */
 	export let data;
 
 	/** @type {string|undefined} */
 	export let title = undefined;
 
+	/** @type {string|undefined} */
+	export let subtitle = undefined;
+
 	/** @type {'pass' | 'warn' | 'error' | undefined} */
 	export let emptySet = undefined;
 
@@ -26,10 +30,9 @@
 </script>
 
 <div style="margin-top: 15px; margin-bottom: 10px;">
-	{#if title}
-		<h4 class="markdown mb-2">{title}</h4>
+	{#if title || subtitle}
+		<ComponentTitle {title} {subtitle} />
 	{/if}
-
 	<QueryLoad {data} let:loaded>
 		<EmptyChart slot="empty" {emptyMessage} {emptySet} {chartType} {isInitial} />
 		<ErrorChart let:loaded slot="error" title={chartType} error={error ?? loaded.error.message} />

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/map/_USMap.svelte b/packages/ui/core-components/src/lib/unsorted/viz/map/_USMap.svelte
@@ -15,7 +15,6 @@
 	} from '@evidence-dev/component-utilities/formatting';
 	import InvisibleLinks from '../../../atoms/InvisibleLinks.svelte';
 	import { getThemeStores } from '../../../themes/themes.js';
-	import chroma from 'chroma-js';
 	import { checkDeprecatedColor } from '../../../deprecated-colors.js';
 
 	const { theme, resolveColorPalette, resolveColorScale } = getThemeStores();
@@ -164,10 +163,10 @@
 				},
 				subtextStyle: {
 					fontSize: 13,
-					color: chroma($theme.colors['base-content']).alpha(0.8).css(),
+					color: $theme.colors['base-content-muted'],
 					overflow: 'break'
 				},
-				top: '0%'
+				top: '1px'
 			},
 			textStyle: {
 				fontFamily: 'sans-serif'

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
@@ -6,6 +6,7 @@
 	import getColumnSummary from '@evidence-dev/component-utilities/getColumnSummary';
 	import { convertColumnToDate } from '@evidence-dev/component-utilities/dateParsing';
 	import ErrorChart from '../core/ErrorChart.svelte';
+	import ComponentTitle from '../../viz/core/ComponentTitle.svelte';
 	import SearchBar from '../core/SearchBar.svelte';
 	import checkInputs from '@evidence-dev/component-utilities/checkInputs';
 	import DownloadData from '../../ui/DownloadData.svelte';
@@ -44,6 +45,12 @@
 
 	$: rows = Number.parseInt(rows);
 
+	/** @type {string | undefined}*/
+	export let title = undefined;
+
+	/** @type {string | undefined}*/
+	export let subtitle = undefined;
+
 	export let rowNumbers = false;
 	$: rowNumbers = rowNumbers === 'true' || rowNumbers === true;
 
@@ -554,6 +561,10 @@
 		on:mouseenter={() => (hovering = true)}
 		on:mouseleave={() => (hovering = false)}
 	>
+		{#if title || subtitle}
+			<ComponentTitle {title} {subtitle} />
+		{/if}
+
 		{#if search}
 			<SearchBar bind:value={searchValue} searchFunction={() => {}} />
 		{/if}

diff --git a/sites/docs/pages/components/charts/line-chart/index.md b/sites/docs/pages/components/charts/line-chart/index.md
@@ -15,12 +15,20 @@ group by all
 
 <DocTab>
     <div slot='preview'>
+        <Grid>
         <LineChart 
             data={orders_by_month}
             x=month
             y=sales_usd0k 
             yAxisTitle="Sales per Month"
+            title="Title"
+            subtitle="Subtitle"
         />
+        <DataTable data={orders_by_month} 
+                    title="Title"
+            subtitle="Subtitle"/>
+        </Grid>
+        
     </div>
 
 ```svelte

diff --git a/sites/docs/pages/components/data/data-table/index.md b/sites/docs/pages/components/data/data-table/index.md
@@ -15,7 +15,7 @@ limit 100
 
 <DocTab>
     <div slot='preview'>
-        <DataTable data={orders_summary}/>
+        <DataTable data={orders_summary} title="Title" subtitle="Subtitle"/>
     </div>
 
 ```svelte
@@ -1260,6 +1260,22 @@ Query name, wrapped in curly braces
 
 Number of rows to show in the table before paginating results. Use `rows=all` to show all rows in the table.
 
+</PropListing>
+<PropListing
+    name=title
+    options="string"
+>
+
+Title for the table
+
+</PropListing>
+<PropListing
+    name=subtitle
+    options="string"
+>
+
+Subtitle - appears under the title
+
 </PropListing>
 <PropListing
     name=headerColor

diff --git a/sites/docs/pages/components/inputs/dimension-grid/index.md b/sites/docs/pages/components/inputs/dimension-grid/index.md
@@ -23,7 +23,7 @@ group by all
 
 <DocTab>
     <div slot='preview'>
-        <DimensionGrid data={orders} metric='sum(sales)' name=selected_dimensions /> 
+        <DimensionGrid data={orders} metric='sum(sales)' name=selected_dimensions/> 
 
         <LineChart data={monthly_sales} handleMissing=zero/> 
     </div>
@@ -134,6 +134,22 @@ SQL aggregate which could be applied to `data` e.g. 'sum(sales)'
 
 Name of the dimension grid, used to reference the selected value elsewhere as `{inputs.name}`
 
+</PropListing>
+<PropListing
+    name=title
+    options="string"
+>
+
+Title for the dimension grid
+
+</PropListing>
+<PropListing
+    name=subtitle
+    options="string"
+>
+
+Subtitle - appears under the title
+
 </PropListing>
 <PropListing 
     name="metricLabel"

diff --git a/sites/docs/pages/components/maps/area-map/index.md b/sites/docs/pages/components/maps/area-map/index.md
@@ -589,6 +589,22 @@ name="valueFmt"
 options="format string"
 >
 Format string for displaying the value.
+</PropListing>
+<PropListing
+    name=title
+    options="string"
+>
+
+Title for the map
+
+</PropListing>
+<PropListing
+    name=subtitle
+    options="string"
+>
+
+Subtitle - appears under the title
+
 </PropListing>
 
 ### Color Scale

diff --git a/sites/docs/pages/components/maps/base-map/index.md b/sites/docs/pages/components/maps/base-map/index.md
@@ -314,6 +314,22 @@ options="pixel value"
 defaultValue="300"
 >
 Height of the map in pixels.
+</PropListing>
+<PropListing
+    name=title
+    options="string"
+>
+
+Title for the map
+
+</PropListing>
+<PropListing
+    name=subtitle
+    options="string"
+>
+
+Subtitle - appears under the title
+
 </PropListing>
 
 ## Layer Options

diff --git a/sites/docs/pages/components/maps/bubble-map/index.md b/sites/docs/pages/components/maps/bubble-map/index.md
@@ -514,6 +514,22 @@ name="pointName"
 options="column name"
 >
 Column containing the names/labels of the points - by default, this is shown as the title of the tooltip.
+</PropListing>
+<PropListing
+    name=title
+    options="string"
+>
+
+Title for the map
+
+</PropListing>
+<PropListing
+    name=subtitle
+    options="string"
+>
+
+Subtitle - appears under the title
+
 </PropListing>
 
 ### Color Scale

diff --git a/sites/docs/pages/components/maps/point-map/index.md b/sites/docs/pages/components/maps/point-map/index.md
@@ -419,6 +419,22 @@ name="pointName"
 options="column name"
 >
 Column containing the names/labels of the points - by default, this is shown as the title of the tooltip.
+</PropListing>
+<PropListing
+    name=title
+    options="string"
+>
+
+Title for the map
+
+</PropListing>
+<PropListing
+    name=subtitle
+    options="string"
+>
+
+Subtitle - appears under the title
+
 </PropListing>
 
 ### Color Scale