fix(BOOK-53): Seo filter block now uses h3 as summary content and adjusted spacing

Approved-by: Bianca Widstam

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"

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;

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 && (