chore: finish tidy up

twilio-labs · Oct 9, 2023 · 24779e5 · 24779e5
1 parent 6495b8a
commit 24779e5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 30 deletions.
diff --git a/packages/paste-website/src/components/search-modal/SearchResultDocs.tsx b/packages/paste-website/src/components/search-modal/SearchResultDocs.tsx
@@ -9,7 +9,7 @@ import { type SearchItem } from "./types";
 
 export const FakeHeading: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
-    <Box fontWeight="fontWeightSemibold" fontSize="fontSize20" marginY="space10">
+    <Box fontWeight="fontWeightSemibold" fontSize="fontSize20" marginY="space10" textDecoration="underline">
       {children}
     </Box>
   );
@@ -51,7 +51,6 @@ export const SearchResultDocs: React.FC<{ searchItem: SearchItem }> = ({ searchI
       href={`${searchItem.meta.slug}#${searchItem.slug}`}
       paddingY="space30"
       paddingX="space60"
-      marginX="space40"
       backgroundColor="colorBackgroundNeutralWeakest"
       outline="none"
       _focus={{

diff --git a/packages/paste-website/src/components/search-modal/index.tsx b/packages/paste-website/src/components/search-modal/index.tsx
@@ -10,9 +10,9 @@ import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon";
 import { Input } from "@twilio-paste/input";
 import { Modal, ModalBody, ModalHeader, ModalHeading, type ModalProps } from "@twilio-paste/modal";
 import { Paragraph } from "@twilio-paste/paragraph";
-import { Stack } from "@twilio-paste/stack";
 import { useUID } from "@twilio-paste/uid-library";
 import groupBy from "lodash/groupBy";
+import Link from "next/link";
 import * as React from "react";
 
 import GithubIcon from "../icons/GithubIcon";
@@ -63,7 +63,7 @@ const SearchModal: React.FC<React.PropsWithChildren<SearchModalProps>> = ({ isOp
   };
 
   return (
-    <Modal isOpen={isOpen} size="wide" ariaLabelledby={modalHeadingId} onDismiss={onDismiss}>
+    <Modal isOpen={isOpen} size="wide" ariaLabelledby={modalHeadingId} onDismiss={onDismiss} initialFocusRef={inputRef}>
       <ModalHeader>
         <ModalHeading as="h3" id={modalHeadingId}>
           <Box display="flex" alignItems="center" columnGap="space40">
@@ -111,32 +111,54 @@ const SearchModal: React.FC<React.PropsWithChildren<SearchModalProps>> = ({ isOp
         </Box>
         {loading && <SearchResultsLoading />}
         {Object.keys(results)?.map((path) => {
-          console.log(results[path][0].type);
+          const resultSections = results[path];
+          const resultParent = {
+            path: resultSections[0].path,
+            title: resultSections[0].meta.title,
+            description: resultSections[0].meta.description,
+            slug: resultSections[0].meta.slug,
+          };
+          const resultType = resultSections[0].type;
           return (
-            <Box key={path} marginBottom="space100">
+            <Box key={path} marginTop="space20" marginBottom="space100">
               <Heading as="h2" variant="heading50">
-                <Anchor href={results[path][0].path} display="block">
-                  <Box as="span" display="flex" alignItems="center" columnGap="space40">
-                    {results[path][0].type === "github-discussions" ? (
-                      <Box size="sizeIcon30" color="colorText">
-                        <GithubIcon decorative={true} size={30} />
-                      </Box>
-                    ) : (
-                      <DocumentationIcon decorative={true} color="colorText" />
-                    )}
-                    {results[path][0].meta.title}
-                  </Box>
-                </Anchor>
+                <Link
+                  href={resultType === "github-discussions" ? resultParent.path : resultParent.slug}
+                  legacyBehavior
+                  passHref
+                >
+                  {/* @ts-expect-error href missing as Next Link is passing down the href for us so we can still do client side routing */}
+                  <Anchor display="block">
+                    <Box as="span" display="flex" alignItems="center" columnGap="space40">
+                      {resultType === "github-discussions" ? (
+                        <Box size="sizeIcon30" color="colorText">
+                          <GithubIcon decorative={true} size={30} />
+                        </Box>
+                      ) : (
+                        <DocumentationIcon decorative={true} color="colorText" />
+                      )}
+                      {resultParent.title}
+                    </Box>
+                  </Anchor>
+                </Link>
               </Heading>
-              {results[path][0].meta.description && <Paragraph>{results[path][0].meta.description}</Paragraph>}
-              <Stack orientation="vertical" spacing="space30">
-                {results[path].map((result) => {
-                  if (result.type === "markdown") {
-                    return <SearchResultDocs key={`${result.path}${result.slug}`} searchItem={result} />;
-                  }
-                  return null;
-                })}
-              </Stack>
+              {resultParent.description && <Paragraph>{resultParent.description}</Paragraph>}
+              {resultType === "markdown" && (
+                <Box paddingX="space40">
+                  <Box as="p" fontSize="fontSize20">
+                    Matching page sections:
+                  </Box>
+                  <Box as="ul" display="flex" flexDirection="column" rowGap="space30" padding="space0" margin="space0">
+                    {resultSections.map((result) => {
+                      return (
+                        <Box as="li" key={`${result.path}${result.slug}`} listStyleType="none" margin="space0">
+                          <SearchResultDocs searchItem={result} />
+                        </Box>
+                      );
+                    })}
+                  </Box>
+                </Box>
+              )}
             </Box>
           );
         })}

diff --git a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx
@@ -27,11 +27,11 @@ const SiteHeaderSearch: React.FC = () => {
         backgroundColor="colorBackgroundBody"
         fontSize="fontSize30"
         fontWeight="fontWeightMedium"
-        lineHeight="lineHeight20"
-        paddingBottom="space30"
+        lineHeight="lineHeight50"
+        paddingBottom="space20"
         paddingLeft="space30"
         paddingRight="space50"
-        paddingTop="space30"
+        paddingTop="space20"
         borderStyle="solid"
         boxShadow="shadowBorder"
         minWidth="200px"