From 5eca2e5d20d11b4a9170f065edba90929d8beda5 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 13 Nov 2025 12:39:19 +0000
Subject: [PATCH] feat(BOOK-433): Added heading to SeoFilters block on
 destination pages

Approved-by: Bianca Widstam
---
 .../DestinationPage/SeoFilters/index.tsx      | 27 ++++++++++---------
 .../SeoFilters/seoFilters.module.css          |  9 +++++++
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/index.tsx
index a99eb0f0f..70e6164c6 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/index.tsx
@@ -4,7 +4,8 @@ import { useIntl } from "react-intl"
 
 import Accordion from "@scandic-hotels/design-system/Accordion"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
@@ -29,6 +30,14 @@ export function SeoFilters({ seoFilters }: SeoFiltersProps) {
 
   return (
     <nav className={styles.seoFilters}>
+      <Typography variant="Title/md">
+        <h2 className={styles.heading}>
+          {intl.formatMessage({
+            id: "filter.filterBy",
+            defaultMessage: "Filter by",
+          })}
+        </h2>
+      </Typography>
       <Accordion className={styles.accordion}>
         {facilityFilters.length > 0 ? (
           <AccordionItem
@@ -42,13 +51,9 @@ export function SeoFilters({ seoFilters }: SeoFiltersProps) {
             <ul className={styles.filterList}>
               {facilityFilters.map(({ filter }) => (
                 <li key={filter.id} className={styles.filterItem}>
-                  <Link
-                    href={`${basePath}/${filter.slug}`}
-                    color="Text/Interactive/Secondary"
-                    textDecoration="underline"
-                  >
+                  <TextLink href={`${basePath}/${filter.slug}`} theme="Primary">
                     {filter.name}
-                  </Link>
+                  </TextLink>
                 </li>
               ))}
             </ul>
@@ -66,13 +71,9 @@ export function SeoFilters({ seoFilters }: SeoFiltersProps) {
             <ul className={styles.filterList}>
               {surroundingsFilters.map(({ filter }) => (
                 <li key={filter.id} className={styles.filterItem}>
-                  <Link
-                    href={`${basePath}/${filter.slug}`}
-                    color="Text/Interactive/Secondary"
-                    textDecoration="underline"
-                  >
+                  <TextLink href={`${basePath}/${filter.slug}`} theme="Primary">
                     {filter.name}
-                  </Link>
+                  </TextLink>
                 </li>
               ))}
             </ul>
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/seoFilters.module.css b/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/seoFilters.module.css
index f7b2c4c19..2a4a9fd65 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/seoFilters.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/seoFilters.module.css
@@ -1,3 +1,12 @@
+.seoFilters {
+  display: grid;
+  gap: var(--Space-x4);
+}
+
+.heading {
+  color: var(--Text-Heading);
+}
+
 .filterList {
   column-count: 2;
   list-style-type: none;