resolve merge conflicts

src/components/EDSLink.tsx

@@ -0,0 +1,27 @@
+import { Box, Text, Link as DSLink } from "@nypl/design-system-react-components"
+import React from "react"
+
+import styles from "../../styles/components/Search.module.scss"
+
+/**
+ * Renders a simple link to log out the user out from the Catalog.
+ */
+const EDSLink = () => {
+  return (
+    <Box className={styles.edsLink} mt="0" mb="0">
+      <Text size="body2" className="eds-link">
+        <span style={{ color: "var(--nypl-colors-ui-success-primary)" }}>
+          New!
+        </span>{" "}
+        Try our{" "}
+        <DSLink href="https://research.ebsco.com/c/2styhb" target="_blank">
+          <strong>Article Search</strong>
+        </DSLink>{" "}
+        to discover online journals, books, and more from home with your library
+        card.
+      </Text>
+    </Box>
+  )
+}
+
+export default EDSLink

src/components/RCLink/RCLink.tsx

@@ -6,6 +6,7 @@ interface RCLinkProps {
   active?: boolean
   href: string
   children: ReactNode
+  className?: string
   color?: string
 }
 
@@ -14,10 +15,16 @@ interface RCLinkProps {
  * Next's Link component to allow for correct navigation in Next per the design system's
  * docs. It also includes an 'active' prop used for styling the SubNav component.
  */
-const RCLink = ({ href, children, active = false, ...rest }: RCLinkProps) => {
+const RCLink = ({
+  className,
+  href,
+  children,
+  active = false,
+  ...rest
+}: RCLinkProps) => {
   return (
     <Link href={href} passHref>
-      <DSLink fontWeight={active && "bold"} {...rest}>
+      <DSLink className={className} fontWeight={active && "bold"} {...rest}>
         {children}
       </DSLink>
     </Link>

src/components/SearchForm/SearchForm.test.tsx

@@ -20,6 +20,8 @@ describe("SearchForm", () => {
     const input = screen.getByRole("textbox")
     await userEvent.clear(input)
   })
+  it.todo("searches on an empty keyword after clearing the form")
+  it.todo("searches for {TBD} on an empty query")
   it("submits a keyword query by default", async () => {
     render(<SearchForm />)
     const input = screen.getByRole("textbox")

src/components/SearchForm/SearchForm.tsx

@@ -7,6 +7,7 @@ import styles from "../../../styles/components/Search.module.scss"
 import RCLink from "../RCLink/RCLink"
 import { getQueryString } from "../../utils/searchUtils"
 import { BASE_URL, PATHS } from "../../config/constants"
+import EDSLink from "../EDSLink"
 
 /**
  * The SearchForm component renders and controls the Search form and
@@ -63,7 +64,9 @@ const SearchForm = () => {
               ],
             }}
             textInputProps={{
+              isClearable: true,
               onChange: (e) => handleChange(e, setSearchTerm),
+              isClearableCallback: () => setSearchTerm(""),
               value: searchTerm,
               labelText:
                 "Search by keyword, title, journal title, or author/contributor",
@@ -76,10 +79,15 @@ const SearchForm = () => {
             }}
           />
         </div>
-        <div className={styles.advancedSearchContainer}>
+        <div className={styles.auxSearchContainer}>
+          <EDSLink />
           {/* Temporary color update. The Header overrides the new
             DS 2.X CSS color variable values. */}
-          <RCLink href={"/search/advanced"} color="#0069BF">
+          <RCLink
+            className={styles.advancedSearch}
+            href={"/search/advanced"}
+            color="#0069BF"
+          >
             Advanced Search
           </RCLink>
         </div>

src/config/constants.ts

@@ -1,7 +1,7 @@
 import { appConfig } from "./config"
 
 export const BASE_URL = "/research/research-catalog"
-export const SITE_NAME = "NYPL Research Catalog"
+export const SITE_NAME = "Research Catalog | NYPL"
 export const RESULTS_PER_PAGE = 50
 export const DRB_RESULTS_PER_PAGE = 3
 

styles/components/Search.module.scss

@@ -10,11 +10,22 @@
   @include maxWidth;
 }
 
-.advancedSearchContainer {
+.auxSearchContainer {
   display: flex;
-  justify-content: flex-end;
-
-  a {
-    margin-top: var(--nypl-space-xxs);
+  justify-content: space-between;
+  margin: var(--nypl-space-xs) 0;
+  @media (max-width: 400px) {
+    flex-direction: column-reverse;
+    bottom-padding: var(--nypl-space-s);
+    align-items: flex-end;
   }
 }
+
+.advancedSearch {
+  min-width: 127px;
+  margin-bottom: var(--nypl-space-s);
+}
+
+.edsLink {
+  padding-right: var(--nypl-space-xl);
+}

styles/components/SubNav.module.scss

@@ -18,6 +18,10 @@
         }
       }
     }
+    @media screen and (max-width: 400px) {
+      display: flex;
+      flex-direction: column;
+    }
   }
 
   a {