Add Search Menu to S2 homepage

Author: devongovett

packages/dev/s2-docs/pages/react-aria/index.mdx

@@ -21,6 +21,7 @@ import {Button} from 'tailwind-starter/Button';
 import ogImage from 'url:../../assets/ReactAriaOpenGraph.webp';
 import reactAriaFavicon from 'url:../../assets/react-aria.ico';
 import SearchMenuWrapperServer from '../../src/SearchMenuWrapperServer';
+import {SearchMenuButton} from '../../src/SearchMenuWrapper';
 import {getCurrentPage, getPages} from '../../src/getPages';
 import {getBaseUrl} from '../../src/pageUtils';
 
@@ -108,7 +109,7 @@ export const description = 'Accessible, high quality UI components and hooks for
         <div className="flex flex-col md:flex-row items-center gap-4 my-10 justify-center">
           <a href="getting-started" className="no-underline bg-linear-to-r from-blue-600 to-indigo-600 border border-blue-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] text-base md:text-lg font-bold text-white px-8 py-3 rounded-full transition focus-ring  dark:outline-white outline-offset-2 active:scale-95 cursor-pointer">Get Started</a>
           <SearchMenuWrapperServer currentPage={props.currentPage}>
-            <span className="block font-spectrum no-underline bg-white/60 border border-black/10 bg-clip-padding text-base md:text-lg font-bold text-slate-800 px-8 py-3 rounded-full backdrop-saturate-150 backdrop-brightness-125 transition hover:bg-white/60 focus-ring  dark:outline-white outline-offset-2 group-pressed:scale-95 cursor-pointer focus-ring group-focus-visible:outline-2">Explore Components</span>
+            <SearchMenuButton className="block font-spectrum no-underline bg-white/60 border border-black/10 bg-clip-padding text-base md:text-lg font-bold text-slate-800 px-8 py-3 rounded-full backdrop-saturate-150 backdrop-brightness-125 transition hover:bg-white/60 focus-ring  dark:outline-white outline-offset-2 pressed:scale-95 focus-ring focus-visible:outline-2">Explore Components</SearchMenuButton>
           </SearchMenuWrapperServer>
         </div>
 
@@ -632,10 +633,10 @@ export const description = 'Accessible, high quality UI components and hooks for
         </a>
 
         <SearchMenuWrapperServer currentPage={props.currentPage}>
-          <span className="block text-start no-underline card-shadow bg-white dark:bg-zinc-800 rounded-xl p-6 transition duration-300 card-shadow-hover hover:scale-[101%] cursor-pointer group-focus-visible:!outline-blue-600 group-focus-visible:dark:!outline-blue-500 group-focus-visible:!outline-2">
+          <SearchMenuButton className="font-[inherit] block text-start no-underline card-shadow bg-white dark:bg-zinc-800 rounded-xl p-6 transition duration-300 card-shadow-hover hover:scale-[101%] cursor-pointer">
             <CardTitle>View Components <ArrowRight aria-hidden className="inline w-5 h-5 mb-1 align-middle" /></CardTitle>
             <CardDescription>See an overview of all of the components and hooks offered by React Aria.</CardDescription>
-          </span>
+          </SearchMenuButton>
         </SearchMenuWrapperServer>
 
         <a href="examples/" className="no-underline card-shadow bg-white dark:bg-zinc-800 rounded-xl p-6 transition duration-300 card-shadow-hover hover:scale-[101%]">

packages/dev/s2-docs/pages/s2/home/Home.tsx

@@ -5,7 +5,7 @@ import { Pre } from "../../../src/CodePlatter";
 import { ObjectStyles } from "./ObjectStyles";
 import { DarkMode } from "./DarkMode";
 import { AppFrame, ExampleApp } from "./ExampleApp";
-import { Divider, Link, LinkButton, Provider, Tab, TabList, TabPanel, Tabs } from "@react-spectrum/s2";
+import { Button, Divider, Link, LinkButton, Provider, Tab, TabList, TabPanel, Tabs } from "@react-spectrum/s2";
 import { Mobile } from "./Mobile";
 import { Rems } from "./Rems";
 // import { PressAnimation } from "./Press";
@@ -42,6 +42,8 @@ import bg from 'data-url:./bg.svg';
 // import { SubmenuAnimation } from "./SubmenuAnimation";
 import { keyframes } from "../../../../../@react-spectrum/s2/style/style-macro" with {type: 'macro'};
 import { getBaseUrl } from "../../../src/pageUtils";
+import SearchMenuWrapperServer from "../../../src/SearchMenuWrapperServer";
+import type {Page} from "@parcel/rsc";
 
 const container = style({
   backgroundColor: 'layer-2/80',
@@ -186,7 +188,7 @@ const swapSpeed = style({
   animationIterationCount: 'infinite'
 });
 
-export function Home() {
+export function Home({currentPage}: {currentPage: Page}) {
   let headingId = useId();
   return (
     <body
@@ -259,7 +261,9 @@ export function Home() {
         <p className={style({font: 'body-3xl', marginY: 0, color: 'white', textWrap: 'balance'})}>React Spectrum empowers you to build high quality, accessible, cohesive apps with Adobe's signature design.</p>
         <div className={style({display: 'flex', gap: 16, flexDirection: {default: 'column', sm: 'row'}, marginTop: 32, marginBottom: 96})}>
           <LinkButton size="XL" staticColor="white" href="getting-started">Get started</LinkButton>
-          <LinkButton size="XL" staticColor="white" variant="secondary" href="react-spectrum">Explore components</LinkButton>
+          <SearchMenuWrapperServer currentPage={currentPage}>
+            <Button size="XL" staticColor="white" variant="secondary">Explore components</Button>
+          </SearchMenuWrapperServer>
         </div>
         <section aria-label="Example app" className={style({height: 'calc(100svh - 24px)', maxHeight: size(600)})}>
           <ExampleApp showArrows />
@@ -504,7 +508,9 @@ const buttonStyle = style({
           <h2 className={style({font: 'heading-2xl', color: 'white'})}>Ready to get started?</h2>
           <div className={style({display: 'flex', gap: 16, flexDirection: {default: 'column', sm: 'row'}})}>
             <LinkButton size="XL" staticColor="white" href="getting-started">Install and setup</LinkButton>
-            <LinkButton size="XL" staticColor="white" variant="secondary" href="react-spectrum">Explore components</LinkButton>
+            <SearchMenuWrapperServer currentPage={currentPage}>
+              <Button size="XL" staticColor="white">Explore components</Button>
+            </SearchMenuWrapperServer>
           </div>
         </section>
       </main>

packages/dev/s2-docs/pages/s2/index.mdx

@@ -46,5 +46,5 @@ export const hideFromSearch = true;
         }
       )}} />
   </head>
-  <Home />
+  <Home currentPage={props.currentPage} />
 </Provider>

packages/dev/s2-docs/src/SearchMenuWrapper.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import '../tailwind/home.global.css';
-import {Button, DialogTrigger, Modal, ModalOverlay} from 'react-aria-components';
+import {Button, ButtonContext, ButtonProps, DialogTrigger, Modal, ModalOverlay} from 'react-aria-components';
 import {flushSync} from 'react-dom';
 import {preloadSearchMenu} from './SearchMenuTrigger';
 import React, {lazy, ReactNode, useState} from 'react';
@@ -86,8 +85,10 @@ export default function SearchMenuWrapper({children}: {children: ReactNode}) {
   return (
     <>
       <div className={style({display: {default: 'none', lg: 'flex'}})}>
-        <DialogTrigger isOpen={searchOpen} onOpenChange={() => {openSearchMenu();}} >
-          <Button onHoverStart={() => preloadSearchMenu()} className="bg-transparent border-0 p-0 group font-[inherit] outline-0">{children}</Button>
+        <DialogTrigger isOpen={searchOpen} onOpenChange={() => {openSearchMenu();}}>
+          <ButtonContext value={{onHoverStart: () => preloadSearchMenu()}}>
+            {children}
+          </ButtonContext>
           <ModalOverlay
             style={{
               zIndex: 21,
@@ -108,7 +109,7 @@ export default function SearchMenuWrapper({children}: {children: ReactNode}) {
       </div>
       <div className={style({display: {default: 'flex', lg: 'none'}})}>
         <DialogTrigger>
-          <Button className="bg-transparent border-0 p-0 group font-[inherit] outline-0">{children}</Button>
+          {children}
           <S2Modal size="fullscreenTakeover">
             <MobileSearchMenu initialTag="components" />
           </S2Modal>
@@ -117,3 +118,7 @@ export default function SearchMenuWrapper({children}: {children: ReactNode}) {
     </>
   );
 }
+
+export function SearchMenuButton(props: ButtonProps) {
+  return <Button {...props} />;
+}