feat(BOOK-433): Added heading to SeoFilters block on destination pages

Approved-by: Bianca Widstam

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
+                  <TextLink href={`${basePath}/${filter.slug}`} theme="Primary">
-                    href={`${basePath}/${filter.slug}`}
-                    color="Text/Interactive/Secondary"
-                    textDecoration="underline"
-                  >
                     {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
+                  <TextLink href={`${basePath}/${filter.slug}`} theme="Primary">
-                    href={`${basePath}/${filter.slug}`}
-                    color="Text/Interactive/Secondary"
-                    textDecoration="underline"
-                  >
                     {filter.name}
-                  </Link>
+                  </TextLink>
                 </li>
               ))}
             </ul>

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;