From cae8186eea90562bd28fe583e10182ecfa40778d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20Engstr=C3=B6m?= <jesper.engstrom@kb.se>
Date: Fri, 23 Aug 2024 14:43:03 +0200
Subject: [PATCH] LWS-227: Extend formatter styling possibilites

---
 lxl-web/src/lib/assets/json/display-web.json  |  4 +++-
 .../src/lib/components/DecoratedData.svelte   | 24 ++++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/lxl-web/src/lib/assets/json/display-web.json b/lxl-web/src/lib/assets/json/display-web.json
index 735745b4b..7e6cc228c 100644
--- a/lxl-web/src/lib/assets/json/display-web.json
+++ b/lxl-web/src/lib/assets/json/display-web.json
@@ -417,6 +417,7 @@
 			"@type": "fresnel:Format",
 			"fresnel:classFormatDomain": ["Contribution"],
 			"fresnel:propertyFormatDomain": ["role"],
+			"fresnel:propertyStyle": ["secondary", "small"],
 			"fresnel:propertyFormat": {
 				"fresnel:contentBefore": " (",
 				"fresnel:contentFirst": "(",
@@ -473,7 +474,7 @@
 			"@id": "genreForm-format",
 			"@type": "fresnel:Format",
 			"fresnel:propertyFormatDomain": ["genreForm"],
-			"fresnel:propertyStyle": ["pill", "nolabel"],
+			"fresnel:propertyStyle": ["nolabel"],
 			"fresnel:valueFormat": {
 				"fresnel:contentBefore": "",
 				"fresnel:contentFirst": ""
@@ -670,6 +671,7 @@
 			"@type": "fresnel:Format",
 			"fresnel:classFormatDomain": ["Collection"],
 			"fresnel:propertyFormatDomain": ["sigel"],
+			"fresnel:propertyStyle": ["secondary", "small"],
 			"fresnel:propertyFormat": {
 				"fresnel:contentBefore": " (",
 				"fresnel:contentFirst": "(",
diff --git a/lxl-web/src/lib/components/DecoratedData.svelte b/lxl-web/src/lib/components/DecoratedData.svelte
index ac3e7fecc..0981c78e7 100644
--- a/lxl-web/src/lib/components/DecoratedData.svelte
+++ b/lxl-web/src/lib/components/DecoratedData.svelte
@@ -161,7 +161,7 @@
 			{/if}
 		{:else}
 			{#if shouldShowContentBefore()}
-				<span class="_contentBefore">
+				<span class={`_contentBefore ${getStyleClasses(data)}`}>
 					{data._contentBefore}
 				</span>
 			{/if}
@@ -217,7 +217,11 @@
 			{:else}
 				{@const [propertyName, propertyData] = getProperty(data)}
 				{#if propertyName && propertyData}
-					<svelte:element this={getElementType(propertyData)} data-property={propertyName}>
+					<svelte:element
+						this={getElementType(propertyData)}
+						data-property={propertyName}
+						class={getStyleClasses(data)}
+					>
 						{#if shouldShowLabels()}
 							<svelte:element this={block ? 'div' : 'span'}>
 								<!-- Add inner span with inline-block to achieve first letter capitalization while still supporting inline whitespaces -->
@@ -245,7 +249,7 @@
 				{/if}
 			{/if}
 			{#if shouldShowContentAfter()}
-				<span class="_contentAfter">
+				<span class={`_contentAfter ${getStyleClasses(data)}`}>
 					{data._contentAfter}
 				</span>
 			{/if}
@@ -257,7 +261,15 @@
 
 <style lang="postcss">
 	.definition {
-		@apply text-sm text-secondary underline decoration-dotted;
+		@apply underline decoration-dotted;
+	}
+
+	.small {
+		@apply text-sm;
+	}
+
+	.secondary {
+		@apply text-secondary;
 	}
 
 	.pill {
@@ -267,10 +279,6 @@
 		@apply hover:bg-pill/16 focus:bg-pill/16;
 	}
 
-	.text-large {
-		@apply text-lg;
-	}
-
 	.remainder {
 		@apply ml-2 whitespace-nowrap rounded-full bg-pill/8 px-2 py-0.5 text-secondary;
 	}