fix(SW-1446): optionally render empty state

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

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 (
     <DialogTrigger>
@@ -135,6 +135,7 @@ export function ClientModal({
                         aria-label={intl.formatMessage({ id: "Results" })}
                         results={results}
                         onAction={onAction}
+                        renderEmptyState={true}
                       />
                     ) : null}
                     {showHistory ? (

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 (
+              <>
+                <Typography variant="Body/Paragraph/mdBold">
+                  <Header className={styles.noResultsLabel}>
+                    {intl.formatMessage({ id: "No results" })}
+                  </Header>
+                </Typography>
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <span className={styles.noResultsDescription}>
+                    {intl.formatMessage({
+                      id: "We couldn't find a matching location for your search.",
+                    })}
+                  </span>
+                </Typography>
+              </>
+            )
+          }
+
           return null
         }}
       >

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);
 }

apps/scandic-web/types/components/destinationOverviewPage/jumpTo/results.ts

@@ -3,4 +3,5 @@ import type { ClientProps } from "./client"
 export type ResultsProps = Pick<ClientProps, "onAction"> & {
   results: NonNullable<ClientProps["results"]>
   "aria-label": string
+  renderEmptyState?: boolean
 }