fix: adjust font size option. now normal is 1rem, small is 0.75rem an…

…d medium is 1.5rem.
UNDP-Data · Dec 29, 2023 · 605e578 · 605e578
1 parent 359cecc
commit 605e578
Show file tree

Hide file tree

Showing 19 changed files with 56 additions and 153 deletions.
diff --git a/.changeset/real-ravens-juggle.md b/.changeset/real-ravens-juggle.md
@@ -0,0 +1,5 @@
+---
+"@undp-data/svelte-undp-design": patch
+---
+
+fix: adjust font size option. now normal is 1rem, small is 0.75rem and medium is 1.5rem.
diff --git a/packages/svelte-undp-design/src/lib/Accordion/Accordion.stories.ts b/packages/svelte-undp-design/src/lib/Accordion/Accordion.stories.ts
@@ -21,9 +21,9 @@ const meta = {
 		fontSize: {
 			type: 'string',
 			description: 'Font size of the accordion header title.',
-			defaultValue: 'medium',
+			defaultValue: 'normal',
 			control: { type: 'select' },
-			options: ['small', 'medium']
+			options: ['small', 'normal', 'medium']
 		},
 		headerIcon: {
 			type: 'string',

diff --git a/packages/svelte-undp-design/src/lib/Accordion/Accordion.svelte b/packages/svelte-undp-design/src/lib/Accordion/Accordion.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	export let headerTitle: string;
 	export let isExpanded = false;
-	export let fontSize: 'small' | 'medium' = 'medium';
+	export let fontSize: 'small' | 'normal' | 'medium' = 'normal';
 	export let headerIcon = '';
 </script>
 
@@ -16,7 +16,10 @@
 					isExpanded = !isExpanded;
 				}}
 			>
-				<p class="accordion-header" style="font-size:{fontSize === 'small' ? 1 : 1.5}rem">
+				<p
+					class="accordion-header"
+					style="font-size:{fontSize === 'small' ? 0.75 : fontSize === 'medium' ? 1.5 : 1}rem"
+				>
 					{#if headerIcon}
 						<i class={headerIcon} />
 					{/if}

diff --git a/sites/geohub/src/components/maplibre/OptionalPropertyEditor.svelte b/sites/geohub/src/components/maplibre/OptionalPropertyEditor.svelte
@@ -40,7 +40,6 @@
 	}
 
 	.tooltip {
-		font-size: 13px;
 		z-index: 10;
 		min-width: 350px;
 		max-width: 400px;

diff --git a/sites/geohub/src/components/maplibre/circle/VectorCircle.svelte b/sites/geohub/src/components/maplibre/circle/VectorCircle.svelte
@@ -64,11 +64,7 @@
 {#if !$legendReadonly}
 	<VectorSimulationAccordion {layerId} {tags} bind:expanded />
 
-	<Accordion
-		headerTitle="Circle radius"
-		fontSize="medium"
-		bind:isExpanded={expanded['circle-radius']}
-	>
+	<Accordion headerTitle="Circle radius" bind:isExpanded={expanded['circle-radius']}>
 		<div class="pb-2" slot="content">
 			<CircleRadius {layerId} bind:readonly={$legendReadonly} />
 		</div>
@@ -77,11 +73,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Circle color"
-		fontSize="medium"
-		bind:isExpanded={expanded['circle-color']}
-	>
+	<Accordion headerTitle="Circle color" bind:isExpanded={expanded['circle-color']}>
 		<div class="pb-2" slot="content">
 			<CircleColor {layerId} {metadata} />
 		</div>
@@ -90,11 +82,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Circle stroke color"
-		fontSize="medium"
-		bind:isExpanded={expanded['circle-stroke-color']}
-	>
+	<Accordion headerTitle="Circle stroke color" bind:isExpanded={expanded['circle-stroke-color']}>
 		<div class="pb-2" slot="content">
 			<CircleStrokeColor {layerId} />
 		</div>
@@ -103,11 +91,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Circle stroke width"
-		fontSize="medium"
-		bind:isExpanded={expanded['circle-stroke-width']}
-	>
+	<Accordion headerTitle="Circle stroke width" bind:isExpanded={expanded['circle-stroke-width']}>
 		<div class="pb-2" slot="content">
 			<CircleStrokeWidth {layerId} />
 		</div>
@@ -117,7 +101,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Opacity" fontSize="medium" bind:isExpanded={expanded['opacity']}>
+	<Accordion headerTitle="Opacity" bind:isExpanded={expanded['opacity']}>
 		<div class="pb-2" slot="content">
 			<OpacitySlider bind:layerId />
 		</div>

diff --git a/sites/geohub/src/components/maplibre/fill-extrusion/VectorFillExtrusion.svelte b/sites/geohub/src/components/maplibre/fill-extrusion/VectorFillExtrusion.svelte
@@ -62,11 +62,7 @@
 {#if !$legendReadonly}
 	<VectorSimulationAccordion {layerId} {tags} bind:expanded />
 
-	<Accordion
-		headerTitle="3D polygon color"
-		fontSize="medium"
-		bind:isExpanded={expanded['fill-extrusion-color']}
-	>
+	<Accordion headerTitle="3D polygon color" bind:isExpanded={expanded['fill-extrusion-color']}>
 		<div class="pb-2" slot="content">
 			<FillExtrusionColor {layerId} {metadata} />
 		</div>
@@ -75,11 +71,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Height of 3D polygon"
-		fontSize="medium"
-		bind:isExpanded={expanded['fill-extrusion-height']}
-	>
+	<Accordion headerTitle="Height of 3D polygon" bind:isExpanded={expanded['fill-extrusion-height']}>
 		<div class="pb-2" slot="content">
 			<FillExtrusionHeight {layerId} {metadata} />>
 		</div>
@@ -88,11 +80,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Base height"
-		fontSize="medium"
-		bind:isExpanded={expanded['fill-extrusion-base']}
-	>
+	<Accordion headerTitle="Base height" bind:isExpanded={expanded['fill-extrusion-base']}>
 		<div class="pb-2" slot="content">
 			<FillExtrusionBase {layerId} />
 		</div>
@@ -106,7 +94,6 @@
 
 	<Accordion
 		headerTitle="Vertical gradient to the sides"
-		fontSize="medium"
 		bind:isExpanded={expanded['fill-extrusion-vertical-gradient']}
 	>
 		<div class="pb-2" slot="content">
@@ -120,7 +107,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Opacity" fontSize="medium" bind:isExpanded={expanded['opacity']}>
+	<Accordion headerTitle="Opacity" bind:isExpanded={expanded['opacity']}>
 		<div class="pb-2" slot="content">
 			<OpacitySlider bind:layerId />
 		</div>

diff --git a/sites/geohub/src/components/maplibre/fill/VectorPolygon.svelte b/sites/geohub/src/components/maplibre/fill/VectorPolygon.svelte
@@ -60,7 +60,7 @@
 {#if !$legendReadonly}
 	<VectorSimulationAccordion {layerId} {tags} bind:expanded />
 
-	<Accordion headerTitle="Fill color" fontSize="medium" bind:isExpanded={expanded['fill-color']}>
+	<Accordion headerTitle="Fill color" bind:isExpanded={expanded['fill-color']}>
 		<div class="pb-2" slot="content">
 			<FillColor {layerId} {metadata} />
 		</div>
@@ -69,11 +69,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Fill outline color"
-		fontSize="medium"
-		bind:isExpanded={expanded['fill-outline-color']}
-	>
+	<Accordion headerTitle="Fill outline color" bind:isExpanded={expanded['fill-outline-color']}>
 		<div class="pb-2" slot="content">
 			<FillOutlineColor {layerId} />
 		</div>
@@ -82,7 +78,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Opacity" fontSize="medium" bind:isExpanded={expanded['opacity']}>
+	<Accordion headerTitle="Opacity" bind:isExpanded={expanded['opacity']}>
 		<div class="pb-2" slot="content">
 			<OpacitySlider bind:layerId />
 		</div>

diff --git a/sites/geohub/src/components/maplibre/heatmap/VectorHeatmap.svelte b/sites/geohub/src/components/maplibre/heatmap/VectorHeatmap.svelte
@@ -39,11 +39,7 @@
 {#if !$legendReadonly}
 	<VectorSimulationAccordion {layerId} {tags} bind:expanded />
 
-	<Accordion
-		headerTitle="Heatmap color"
-		fontSize="medium"
-		bind:isExpanded={expanded['heatmap-color']}
-	>
+	<Accordion headerTitle="Heatmap color" bind:isExpanded={expanded['heatmap-color']}>
 		<div class="pb-2" slot="content">
 			<HeatmapColor {layerId} />
 		</div>
@@ -52,11 +48,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Heatmap Intensity"
-		fontSize="medium"
-		bind:isExpanded={expanded['heatmap-intensity']}
-	>
+	<Accordion headerTitle="Heatmap Intensity" bind:isExpanded={expanded['heatmap-intensity']}>
 		<div class="pb-2" slot="content">
 			<HeatmapIntensity {layerId} />
 		</div>
@@ -68,11 +60,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Heatmap Radius"
-		fontSize="medium"
-		bind:isExpanded={expanded['heatmap-radius']}
-	>
+	<Accordion headerTitle="Heatmap Radius" bind:isExpanded={expanded['heatmap-radius']}>
 		<div class="pb-2" slot="content">
 			<HeatmapRadius {layerId} />
 		</div>
@@ -84,11 +72,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Heatmap Weight"
-		fontSize="medium"
-		bind:isExpanded={expanded['heatmap-weight']}
-	>
+	<Accordion headerTitle="Heatmap Weight" bind:isExpanded={expanded['heatmap-weight']}>
 		<div class="pb-2" slot="content">
 			<HeatmapWeight {layerId} />
 		</div>
@@ -101,7 +85,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Opacity" fontSize="medium" bind:isExpanded={expanded['opacity']}>
+	<Accordion headerTitle="Opacity" bind:isExpanded={expanded['opacity']}>
 		<div class="pb-2" slot="content">
 			<OpacitySlider bind:layerId />
 		</div>

diff --git a/sites/geohub/src/components/maplibre/line/VectorLine.svelte b/sites/geohub/src/components/maplibre/line/VectorLine.svelte
@@ -63,7 +63,7 @@
 {#if !$legendReadonly}
 	<VectorSimulationAccordion {layerId} {tags} bind:expanded />
 
-	<Accordion headerTitle="Line color" fontSize="medium" bind:isExpanded={expanded['line-color']}>
+	<Accordion headerTitle="Line color" bind:isExpanded={expanded['line-color']}>
 		<div class="pb-2" slot="content">
 			<LineColor {layerId} {metadata} />
 		</div>
@@ -72,7 +72,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Line width" fontSize="medium" bind:isExpanded={expanded['line-width']}>
+	<Accordion headerTitle="Line width" bind:isExpanded={expanded['line-width']}>
 		<div class="pb-2" slot="content">
 			<LineWidth {layerId} {metadata} />
 		</div>
@@ -81,11 +81,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion
-		headerTitle="Line pattern"
-		fontSize="medium"
-		bind:isExpanded={expanded['line-pattern']}
-	>
+	<Accordion headerTitle="Line pattern" bind:isExpanded={expanded['line-pattern']}>
 		<div class="pb-2" slot="content">
 			<LinePattern {layerId} />
 		</div>
@@ -94,7 +90,7 @@
 		</div>
 	</Accordion>
 
-	<Accordion headerTitle="Opacity" fontSize="medium" bind:isExpanded={expanded['opacity']}>
+	<Accordion headerTitle="Opacity" bind:isExpanded={expanded['opacity']}>
 		<div class="pb-2" slot="content">
 			<OpacitySlider bind:layerId />
 		</div>