feat: ePubs search (#693)

* Add EPubsCard component

* Update styles

* Add test for EPubsCard

* Update query url and tests

src/__tests__/pages/search.test.tsx

@@ -112,19 +112,21 @@ describe('Search page', () => {
       expect(
         await screen.findByRole('heading', { level: 2 })
       ).toHaveTextContent('There are 0 results for ‘’')
+
       expect(
-        await screen.findByRole('heading', { level: 3 })
-      ).toHaveTextContent('There are no results that match that query.')
+        screen.getAllByText('There are no results that match that query.')
+      ).toHaveLength(1)
     })
 
     it('renders no results if there were no matches for the query', async () => {
       renderWithAuth(<SearchPage query="nomatches" />)
       expect(
         await screen.findByRole('heading', { level: 2 })
       ).toHaveTextContent('There are 0 results for ‘nomatches’')
+
       expect(
-        await screen.findByRole('heading', { level: 3 })
-      ).toHaveTextContent('There are no results that match that query.')
+        screen.getAllByText('There are no results that match that query.')
+      ).toHaveLength(1)
     })
 
     it('renders the results if there were matches for the query', async () => {

src/components/EPubsCard/EPubsCard.module.scss

@@ -0,0 +1,24 @@
+@import 'styles/uswdsDependencies';
+
+.epubs {
+  border: 1px solid #929292;
+  border-radius: 8px;
+  padding: units(2);
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
+
+  > h3 {
+    margin: 0;
+  }
+
+  h3 + p {
+    margin-top: units('105');
+  }
+
+  p {
+    font-family: 'Sharp Sans';
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.35;
+    text-overflow: wrap;
+  }
+}

src/components/EPubsCard/EPubsCard.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import type { Meta } from '@storybook/react'
+import EPubsCard from './EPubsCard'
+
+export default {
+  title: 'Components/EPubsCard',
+  component: EPubsCard,
+  decorators: [
+    (Story) => (
+      <div className="sfds">
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta
+
+export const DefaultEPubsCard = () => <EPubsCard query="my test query" />

src/components/EPubsCard/EPubsCard.test.tsx

@@ -0,0 +1,27 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react'
+
+import React from 'react'
+
+import EPubsCard from './EPubsCard'
+
+describe('EPubsCard component', () => {
+  it('renders the card', () => {
+    render(<EPubsCard query="test" />)
+
+    expect(screen.getAllByText('Looking for a form?')).toHaveLength(1)
+
+    const link = screen.getByRole('link', {
+      name: 'Search ePubs',
+    })
+
+    expect(link).toHaveAttribute(
+      'href',
+      'https://search.usa.gov/search?affiliate=afpw_epubs&query=test'
+    )
+    expect(link).toBeInstanceOf(HTMLAnchorElement)
+  })
+})

src/components/EPubsCard/EPubsCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import styles from './EPubsCard.module.scss'
+import LinkTo from 'components/util/LinkTo/LinkTo'
+
+type PropTypes = {
+  query: string
+}
+
+const EPubsCard = ({ query }: PropTypes) => {
+  const ePubsSearch = `https://search.usa.gov/search?affiliate=afpw_epubs&query=${query}`
+
+  return (
+    <div className={styles.epubs}>
+      <h3>Looking for a form?</h3>
+      <p>Launch your query on ePubs!</p>
+      <LinkTo
+        href={ePubsSearch}
+        target="_blank"
+        rel="noreferrer noopener"
+        className="usa-button">
+        Search ePubs
+      </LinkTo>
+    </div>
+  )
+}
+
+export default EPubsCard

src/pages/search.tsx

@@ -4,6 +4,7 @@ import {
   Breadcrumb,
   BreadcrumbLink,
   GridContainer,
+  Grid,
 } from '@trussworks/react-uswds'
 
 import { client } from 'lib/keystoneClient'
@@ -12,6 +13,7 @@ import { useUser } from 'hooks/useUser'
 import { withArticleLayout } from 'layout/DefaultLayout/ArticleLayout'
 import NavLink, { NavLinkProps } from 'components/util/NavLink/NavLink'
 import PageHeader from 'components/PageHeader/PageHeader'
+import EPubsCard from 'components/EPubsCard/EPubsCard'
 import { SEARCH } from 'operations/cms/queries/search'
 import { SearchBanner } from 'components/SearchBanner/SearchBanner'
 import { SearchResultItem } from 'components/SearchResultItem/SearchResultItem'
@@ -62,17 +64,27 @@ const Search = ({
                 {resultString} for ‘{query}’
               </h2>
             </div>
+
             {results.length > 0 ? (
               <>
-                <ol className={styles.searchResults}>
-                  {results.map((i: SearchResultRecord) => {
-                    return (
-                      <li key={`result_${i.id}`}>
-                        <SearchResultItem item={i} />
-                      </li>
-                    )
-                  })}
-                </ol>
+                <Grid row gap="md">
+                  <Grid col="auto">
+                    <EPubsCard query={query} />
+                  </Grid>
+
+                  <Grid col="fill">
+                    <ol className={styles.searchResults}>
+                      {results.map((i: SearchResultRecord) => {
+                        return (
+                          <li key={`result_${i.id}`}>
+                            <SearchResultItem item={i} />
+                          </li>
+                        )
+                      })}
+                    </ol>
+                  </Grid>
+                </Grid>
+
                 <SearchBanner
                   icon={
                     <img
@@ -90,21 +102,28 @@ const Search = ({
                 </SearchBanner>
               </>
             ) : (
-              <SearchBanner
-                icon={
-                  <img
-                    src="/assets/images/moon-flag.svg"
-                    alt="Icon of the US flag on the moon"
-                  />
-                }>
-                <div>
-                  <h3>There are no results that match that query.</h3>
-                  <p>
-                    It seems you didn’t find what you were looking for. Please
-                    search again with different keywords.
-                  </p>
-                </div>
-              </SearchBanner>
+              <Grid row gap="md">
+                <Grid col="auto">
+                  <EPubsCard query={query} />
+                </Grid>
+                <Grid col="fill">
+                  <SearchBanner
+                    icon={
+                      <img
+                        src="/assets/images/moon-flag.svg"
+                        alt="Icon of the US flag on the moon"
+                      />
+                    }>
+                    <div>
+                      <h3>There are no results that match that query.</h3>
+                      <p>
+                        It seems you didn’t find what you were looking for.
+                        Please search again with different keywords.
+                      </p>
+                    </div>
+                  </SearchBanner>
+                </Grid>
+              </Grid>
             )}
           </>
         )}

src/styles/pages/search.module.scss

@@ -23,3 +23,7 @@
     margin-bottom: units(6);
   }
 }
+
+.noResults {
+  display: flex;
+}