From d80edce3abcc8c5ff1efbfaccb11d4985ced41e1 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 28 Jan 2025 13:34:45 +0100
Subject: [PATCH] Add non clickable variant for tag

---
 v2/pink-sb/src/lib/Tag.svelte           | 23 +++++++++++++++++------
 v2/pink-sb/src/lib/step/StepItem.svelte |  2 +-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/v2/pink-sb/src/lib/Tag.svelte b/v2/pink-sb/src/lib/Tag.svelte
index 8707f678c8..e307965cf1 100644
--- a/v2/pink-sb/src/lib/Tag.svelte
+++ b/v2/pink-sb/src/lib/Tag.svelte
@@ -5,20 +5,29 @@
         Partial<{
             selected: boolean;
             size: 's' | 'm';
+            isClickable?: boolean;
         }>;
 
     export let size: $$Props['size'] = 'm';
     export let selected: $$Props['selected'] = false;
+    export let isClickable: $$Props['isClickable'] = true;
 </script>
 
-<button class:s={size === 's'} on:click class:selected type="button" {...$$restProps}>
-    <slot />
-</button>
+{#if isClickable}
+    <button class:s={size === 's'} on:click class:selected type="button" {...$$restProps}>
+        <slot />
+    </button>
+{:else}
+    <div class:s={size === 's'} class:selected {...$$restProps}>
+        <slot />
+    </div>
+{/if}
 
 <style lang="scss">
     @use '../scss/mixins/transitions';
 
-    button {
+    button,
+    div {
         @include transitions.common;
 
         --p-tag-font-family: var(--badge-font-family, var(--font-family-sansserif));
@@ -47,8 +56,6 @@
         font-weight: 500;
         line-height: 140%;
 
-        cursor: pointer;
-
         &.s {
             --p-tag-padding-block: var(--space-1);
             --p-tag-padding-inline: var(--space-3);
@@ -70,4 +77,8 @@
             background-color: var(--color-bgcolor-neutral-tertiary);
         }
     }
+
+    button {
+        cursor: pointer;
+    }
 </style>
diff --git a/v2/pink-sb/src/lib/step/StepItem.svelte b/v2/pink-sb/src/lib/step/StepItem.svelte
index 3b5007124a..8c1149332f 100644
--- a/v2/pink-sb/src/lib/step/StepItem.svelte
+++ b/v2/pink-sb/src/lib/step/StepItem.svelte
@@ -18,7 +18,7 @@
     {/if}
     {#if !hideBadge}
         <div class="badge">
-            <Tag size="s">
+            <Tag size="s" isClickable={false}>
                 {#if state === 'next'}
                     Next
                 {:else if state === 'current'}