Merged in feat/SW-1444-destination-page-add-destination-list-component (pull request #1240)

feat/SW-1444 destination page add destination list component

* feat(SW-1444): add list component

* feat(SW-1444): add subtitle to accordion

* feat(SW-1444): refactor component structure

* feat(SW-1444): add desktop breakpoint

* feat(SW-1444): fix typo

* feat(SW-1444): add props

* feat(SW-1444): add query

* feat(SW-1444): updated query

* feat(SW-1444): display data

* feat(SW-1444): fix merge hickup

* feat(SW-1444): change var name

* feat(SW-1444): remove unsued translations

* feat(SW-1444): use country as title

* feat(SW-1444): sort hotels in query

* feat(SW-1444): make responsive

* feat(SW-1444): fetch country url

* feat(SW-1444): update logging

* feat(SW-1444): remove spread


Approved-by: Erik Tiekstra
This commit is contained in:
Fredrik Thorsson
2025-02-04 14:17:12 +00:00
parent 4ed4b3585b
commit b85a3a57ec
27 changed files with 489 additions and 21 deletions

View File

@@ -9,4 +9,5 @@ export interface AccordionItemProps
title: string
icon?: IconName
trackingId?: string
subtitle?: string
}

View File

@@ -22,6 +22,7 @@ export default function AccordionItem({
variant,
className,
trackingId,
subtitle,
}: AccordionItemProps) {
const contentRef = useRef<HTMLDivElement>(null)
const detailsRef = useRef<HTMLDetailsElement>(null)
@@ -55,9 +56,7 @@ export default function AccordionItem({
<li className={accordionItemVariants({ className, variant, theme })}>
<details ref={detailsRef} onToggle={toggleAccordion}>
<summary className={styles.summary}>
{IconComp && (
<IconComp className={styles.icon} color="baseTextHighcontrast" />
)}
{IconComp && <IconComp color="baseTextHighcontrast" />}
{variant === "sidepeek" ? (
<Subtitle
className={styles.title}
@@ -67,13 +66,18 @@ export default function AccordionItem({
{title}
</Subtitle>
) : (
<Body
textTransform="bold"
color="baseTextHighContrast"
className={styles.title}
>
{title}
</Body>
<div className={styles.title}>
{subtitle ? (
<Subtitle type="two" color="baseTextHighContrast">
{title}
</Subtitle>
) : (
<Body textTransform="bold" color="baseTextHighContrast">
{title}
</Body>
)}
{subtitle && <Body color="baseTextHighContrast">{subtitle}</Body>}
</div>
)}
<ChevronDownIcon
className={styles.chevron}