From 725b1056371c5b2bd656165903d2d1426d18f69a Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Mon, 6 Oct 2025 10:43:05 +0000
Subject: [PATCH] fix(BOOK-53): Seo filter block now uses h3 as summary content
 and adjusted spacing

Approved-by: Bianca Widstam
---
 .../ContentType/DestinationPage/SeoFilters/index.tsx      | 6 ++++--
 .../DestinationPage/SeoFilters/seoFilters.module.css      | 4 ++++
 .../lib/components/Accordion/AccordionItem/index.tsx      | 8 ++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/index.tsx
index f7913fc87..039aa7986 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/index.tsx
@@ -38,10 +38,11 @@ export function SeoFilters({ seoFilters, location }: SeoFiltersProps) {
               { location }
             )}
             showAsSubtitle
+            titleLevel="h3"
           >
             <ul className={styles.filterList}>
               {facilityFilters.map(({ filter }) => (
-                <li key={filter.id}>
+                <li key={filter.id} className={styles.filterItem}>
                   <Link
                     href={`${basePath}/${filter.slug}`}
                     color="Text/Interactive/Secondary"
@@ -61,10 +62,11 @@ export function SeoFilters({ seoFilters, location }: SeoFiltersProps) {
               { location }
             )}
             showAsSubtitle
+            titleLevel="h3"
           >
             <ul className={styles.filterList}>
               {surroundingsFilters.map(({ filter }) => (
-                <li key={filter.id}>
+                <li key={filter.id} className={styles.filterItem}>
                   <Link
                     href={`${basePath}/${filter.slug}`}
                     color="Text/Interactive/Secondary"
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 e47b57734..f7b2c4c19 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/seoFilters.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/seoFilters.module.css
@@ -4,6 +4,10 @@
   gap: var(--Space-x15);
 }
 
+.filterItem {
+  margin-bottom: var(--Space-x15);
+}
+
 @media screen and (min-width: 1367px) {
   .filterList {
     column-count: 3;
diff --git a/packages/design-system/lib/components/Accordion/AccordionItem/index.tsx b/packages/design-system/lib/components/Accordion/AccordionItem/index.tsx
index 2d691eaef..b9f8dd4ba 100644
--- a/packages/design-system/lib/components/Accordion/AccordionItem/index.tsx
+++ b/packages/design-system/lib/components/Accordion/AccordionItem/index.tsx
@@ -17,6 +17,7 @@ export interface AccordionItemProps
   extends React.HtmlHTMLAttributes<HTMLDetailsElement>,
     VariantProps<typeof accordionItemVariants> {
   title: string
+  titleLevel?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   iconName?: IconName
   icon?: ReactNode
   subtitle?: string
@@ -29,6 +30,7 @@ export default function AccordionItem({
   icon,
   iconName,
   title,
+  titleLevel = 'p',
   type,
   className,
   subtitle,
@@ -70,6 +72,8 @@ export default function AccordionItem({
     }
   }
 
+  const TitleLevel = titleLevel
+
   return (
     <li className={accordionItemVariants({ className, type })}>
       <details ref={detailsRef} onToggle={toggleAccordion}>
@@ -83,11 +87,11 @@ export default function AccordionItem({
             <div className={styles.title}>
               {subtitle || showAsSubtitle ? (
                 <Typography variant="Title/Subtitle/md">
-                  <p className={styles.title}>{title}</p>
+                  <TitleLevel className={styles.title}>{title}</TitleLevel>
                 </Typography>
               ) : (
                 <Typography variant="Body/Paragraph/mdBold">
-                  <p className={styles.title}>{title}</p>
+                  <TitleLevel className={styles.title}>{title}</TitleLevel>
                 </Typography>
               )}
               {subtitle && (