diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx index a12ea6501..0badc3d9c 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx @@ -116,6 +116,7 @@ export function ClientInline({ aria-label={intl.formatMessage({ id: "Results" })} results={results} onAction={onAction} + renderEmptyState={true} /> ) : null} {showHistory ? ( diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx index 3f21da8ef..9faee9f82 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx @@ -37,7 +37,7 @@ export function ClientModal({ const [isPending, startTransition] = useTransition() const showResults = !!results - const showHistory = !results || results.length === 0 + const showHistory = latest.length > 0 && (!results || results.length === 0) return ( @@ -135,6 +135,7 @@ export function ClientModal({ aria-label={intl.formatMessage({ id: "Results" })} results={results} onAction={onAction} + renderEmptyState={true} /> ) : null} {showHistory ? ( diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx index 28e21c509..54384b8d6 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx @@ -23,6 +23,7 @@ export function Results({ "aria-label": ariaLabel, results, onAction, + renderEmptyState = false, }: ResultsProps) { const intl = useIntl() @@ -40,6 +41,25 @@ export function Results({ className={styles.menu} items={results} renderEmptyState={() => { + if (renderEmptyState) { + return ( + <> + +
+ {intl.formatMessage({ id: "No results" })} +
+
+ + + {intl.formatMessage({ + id: "We couldn't find a matching location for your search.", + })} + + + + ) + } + return null }} > diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css index e3e4bc4f2..8b587d9b3 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css @@ -1,6 +1,17 @@ .menu { height: 100%; overflow-y: auto; + + &[data-empty] { + height: initial; + overflow-y: initial; + padding-left: var(--Space-x1); + } +} + +.menu ~ .menu { + padding-top: var(--Space-x2); + border-top: solid 1px var(--Border-Divider-Subtle); } .sectionHeader { @@ -40,10 +51,6 @@ color: var(--UI-Text-Placeholder); } -.noResults { - padding-left: var(--Space-x1); -} - .noResultsLabel { color: var(--Text-Default); } diff --git a/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/results.ts b/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/results.ts index 68ad462ec..0f6259910 100644 --- a/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/results.ts +++ b/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/results.ts @@ -3,4 +3,5 @@ import type { ClientProps } from "./client" export type ResultsProps = Pick & { results: NonNullable "aria-label": string + renderEmptyState?: boolean }