feat(unified-search): revise suggested pages design (#2024)

* chore: enable flags for dev and preview

* chore: stub in separate suggested search component

* chore: use component after results too

* feat: implement revised suggested page

* fix: avoid user-select of nbsp fix

* chore: fix grid gap

* fix: hcp suggested page icon color

* chore: remove redundant content div

config/development.json

@@ -13,6 +13,6 @@
 		"max_static_paths": 1
 	},
 	"flags": {
-		"enable_unified_search": false
+		"enable_unified_search": true
 	}
 }

config/preview.json

@@ -4,6 +4,6 @@
 		"max_static_paths": 10
 	},
 	"flags": {
-		"enable_unified_search": false
+		"enable_unified_search": true
 	}
 }

src/components/command-bar/commands/search/unified-search/components/dialog-body/index.tsx

@@ -16,8 +16,9 @@ import {
 import { useCommandBar } from 'components/command-bar'
 // Shared search
 import { generateSuggestedPages } from '../../../helpers'
-import { RecentSearches, SuggestedPages } from '../../../components'
+import { RecentSearches } from '../../../components'
 // Unified search
+import SuggestedPages from '../suggested-pages'
 import { UnifiedHitsContainer } from '../unified-hits-container'
 import { gatherSearchTabsData } from '../unified-hits-container/helpers'
 import {

src/components/command-bar/commands/search/unified-search/components/suggested-pages/index.tsx

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Text from 'components/text'
+import LinkRegion from 'components/link-region'
+import IconTile from 'components/icon-tile'
+import { CommandBarList } from 'components/command-bar/components'
+import { SuggestedPageProps } from './types'
+// Styles
+import s from './suggested-page.module.css'
+
+/**
+ * Renders a single suggested page list item.
+ */
+function SuggestedPage({ icon, url, text }: SuggestedPageProps) {
+	return (
+		<LinkRegion className={s.root} href={url} ariaLabel={text}>
+			<div className={s.content}>
+				<IconTile className={s.icon} size="small">
+					{icon}
+				</IconTile>
+				<Text
+					dangerouslySetInnerHTML={{ __html: text }}
+					asElement="span"
+					className={s.text}
+					size={300}
+					weight="medium"
+				/>
+			</div>
+		</LinkRegion>
+	)
+}
+
+/**
+ * Renders a list of suggested search result pages.
+ */
+function SuggestedPages({ pages }: { pages: SuggestedPageProps[] }) {
+	return (
+		<CommandBarList label="Suggested Pages">
+			{pages.map(({ url, icon, text }: SuggestedPageProps) => (
+				<li key={url}>
+					<SuggestedPage icon={icon} text={text} url={url} />
+				</li>
+			))}
+		</CommandBarList>
+	)
+}
+
+export default SuggestedPages

src/components/command-bar/commands/search/unified-search/components/suggested-pages/suggested-page.module.css

@@ -0,0 +1,35 @@
+.root {
+	--border-radius: 5px;
+
+	border-radius: var(--border-radius);
+	padding: 8px;
+
+	&:hover {
+		background: var(--token-color-surface-strong);
+		box-shadow: var(--token-surface-base-box-shadow);
+		cursor: pointer;
+	}
+}
+
+.content {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.icon {
+	color: var(--token-color-foreground-primary);
+	flex-shrink: 0;
+
+	@media (--dev-dot-mobile) {
+		display: none;
+	}
+}
+
+.text {
+	color: var(--token-color-foreground-strong);
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

src/components/command-bar/commands/search/unified-search/components/suggested-pages/types.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { ReactElement } from 'react'
+
+interface SuggestedPageProps {
+	icon: ReactElement
+	text: string
+	url: string
+}
+
+export type { SuggestedPageProps }

src/components/command-bar/commands/search/unified-search/components/unified-hits-container/index.tsx

@@ -3,18 +3,15 @@ import Tabs, { Tab } from 'components/tabs'
 import { CommandBarDivider } from 'components/command-bar/components'
 import { CommandBarList } from 'components/command-bar/components'
 // Shared search
-import {
-	NoResultsMessage,
-	SuggestedPage,
-	SuggestedPages,
-	TabHeadingWithCount,
-} from '../../../components'
+import { NoResultsMessage, TabHeadingWithCount } from '../../../components'
 // Unified search
+import SuggestedPages from '../suggested-pages'
 import { UnifiedHit } from '../unified-hit'
 import { getUnifiedHitProps } from '../unified-hit/helpers'
 // Types
 import type { Hit } from 'instantsearch.js'
 import type { UnifiedSearchTabContent } from './helpers'
+import type { SuggestedPageProps } from '../suggested-pages/types'
 // Styles
 import s from './unified-hits-container.module.css'
 
@@ -26,7 +23,7 @@ export function UnifiedHitsContainer({
 	suggestedPages,
 }: {
 	tabsData: UnifiedSearchTabContent[]
-	suggestedPages: SuggestedPage[]
+	suggestedPages: SuggestedPageProps[]
 }) {
 	return (
 		<div className={s.tabsWrapper}>
@@ -54,10 +51,9 @@ export function UnifiedHitsContainer({
 									<div className={s.commandBarListWrapper}>
 										<CommandBarList ariaLabelledBy={resultsLabelId}>
 											{hits.map((hit: Hit) => (
-												<UnifiedHit
-													key={hit.objectID}
-													{...getUnifiedHitProps(hit)}
-												/>
+												<li key={hit.objectID}>
+													<UnifiedHit {...getUnifiedHitProps(hit)} />
+												</li>
 											))}
 										</CommandBarList>
 										{/* TODO: add suggested pages */}

src/components/link-region/link-region.module.css

@@ -20,6 +20,7 @@
 	bottom: 0;
 	left: 0;
 	right: 0;
+	user-select: none;
 
 	/* makes the whole region clickable */
 	&::before {