feat(cookie-manager): add onPolicyClickto the skcm configuration (#157)

* feat(cookie-manager): add new prop to cookie disclaimer

* chore(cookie-manager): remove class

Author: Juligs

cookie-manager/core/types.ts

@@ -32,6 +32,7 @@ export type DisclaimerConfiguration = {
 	policyUrl?: string
 	acceptButtonText?: string
 	rejectButtonText?: string
+	onPolicyClick?: () => void
 }
 
 export type ServicesConfiguration = {

cookie-manager/react/src/lib/components/Disclaimer/Disclaimer.tsx

@@ -17,10 +17,11 @@ export function Disclaimer({
 	allowCookies,
 	declineCookies
 }: DisclaimerProps): React.JSX.Element {
-	const { title, body, policyUrl, policyText, acceptButtonText, rejectButtonText } = {
-		...DEFAULT_DISCLAIMER_CONFIG,
-		...configuration
-	}
+	const { title, body, policyUrl, policyText, acceptButtonText, rejectButtonText, onPolicyClick } =
+		{
+			...DEFAULT_DISCLAIMER_CONFIG,
+			...configuration
+		}
 	const styles = parseThemeColors(theme)
 
 	return (
@@ -29,9 +30,19 @@ export function Disclaimer({
 				{title && <h6 id="skcm-title">{title}</h6>}
 				<p id="skcm-body">
 					{body}
-					<a href={policyUrl} target="_blank" rel="noopener noreferrer">
+					{onPolicyClick ? (
+						<span id="skcm-policy-link__wrapper">
+							<Button onClick={onPolicyClick} id="skcm-policy-link__button">
+								{policyText}
+							</Button>
+						</span>
+					) : policyUrl ? (
+						<a href={policyUrl} target="_blank" rel="noopener noreferrer">
+							<span id="skcm-link__span">{policyText}</span>
+						</a>
+					) : (
 						<span id="skcm-link__span">{policyText}</span>
-					</a>
+					)}
 				</p>
 			</div>
 			<div id="skcm-cookie-disclaimer__buttons">

cookie-manager/react/src/lib/style/style.scss

@@ -18,6 +18,15 @@
 		text-decoration: none;
 	}
 
+	#skcm-policy-link__button {
+		background-color: transparent;
+		color: inherit;
+		text-transform: none;
+		padding: 0;
+		display: inline;
+		color: var(--primary);
+	}
+
 	button {
 		text-transform: uppercase;
 		display: block;
@@ -51,6 +60,7 @@
 		border-bottom: none;
 		border-collapse: collapse;
 		text-align: left;
+
 		thead {
 			tr {
 				th {
@@ -62,6 +72,7 @@
 				}
 			}
 		}
+
 		tbody {
 			tr {
 				td {
@@ -73,6 +84,7 @@
 					&:first-child {
 						font-weight: bold;
 					}
+
 					a {
 						color: var(--primary);
 						text-decoration: none;

cookie-manager/sveltekit/src/lib/components/Disclaimer.svelte

@@ -24,14 +24,26 @@
 		{/if}
 		<p id="skcm-body">
 			{body ?? DEFAULT_DISCLAIMER_CONFIG.body}
-			<a
-				href={configuration?.policyUrl ?? DEFAULT_DISCLAIMER_CONFIG.policyUrl}
-				target="_blank"
-				rel="noopener noreferrer"
-				><span id="skcm-link__span"
-					>{configuration?.policyText ?? DEFAULT_DISCLAIMER_CONFIG.policyText}</span
-				></a
-			>
+
+			{#if configuration?.onPolicyClick}
+				<Button id="skcm-policy-link__button" on:click={configuration.onPolicyClick}>
+					{configuration.policyText ?? DEFAULT_DISCLAIMER_CONFIG.policyText}
+				</Button>
+			{:else if configuration?.policyUrl}
+				<a
+					href={configuration.policyUrl ?? DEFAULT_DISCLAIMER_CONFIG.policyUrl}
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<span id="skcm-link__span">
+						{configuration.policyText ?? DEFAULT_DISCLAIMER_CONFIG.policyText}
+					</span>
+				</a>
+			{:else}
+				<span id="skcm-link__span">
+					{configuration.policyText ?? DEFAULT_DISCLAIMER_CONFIG.policyText}
+				</span>
+			{/if}
 		</p>
 	</div>
 	<div id="skcm-cookie-disclaimer__buttons">

cookie-manager/sveltekit/src/lib/style/style.scss

@@ -18,6 +18,15 @@
 		text-decoration: none;
 	}
 
+	#skcm-policy-link__button {
+		background-color: transparent;
+		color: inherit;
+		text-transform: none;
+		padding: 0;
+		display: inline;
+		color: var(--primary);
+	}
+
 	button {
 		text-transform: uppercase;
 		display: block;
@@ -51,6 +60,7 @@
 		border-bottom: none;
 		border-collapse: collapse;
 		text-align: left;
+
 		thead {
 			tr {
 				th {
@@ -62,6 +72,7 @@
 				}
 			}
 		}
+
 		tbody {
 			tr {
 				td {
@@ -73,6 +84,7 @@
 					&:first-child {
 						font-weight: bold;
 					}
+
 					a {
 						color: var(--primary);
 						text-decoration: none;