diff --git a/src/__tests__/pages/search.test.tsx b/src/__tests__/pages/search.test.tsx
index ab7b62377..47f38d9ea 100644
--- a/src/__tests__/pages/search.test.tsx
+++ b/src/__tests__/pages/search.test.tsx
@@ -112,9 +112,10 @@ 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 () => {
@@ -122,9 +123,10 @@ describe('Search page', () => {
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 () => {
diff --git a/src/components/EPubsCard/EPubsCard.module.scss b/src/components/EPubsCard/EPubsCard.module.scss
new file mode 100644
index 000000000..111f413ff
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/components/EPubsCard/EPubsCard.stories.tsx b/src/components/EPubsCard/EPubsCard.stories.tsx
new file mode 100644
index 000000000..61a62698c
--- /dev/null
+++ b/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) => (
+
+
+
+ ),
+ ],
+} as Meta
+
+export const DefaultEPubsCard = () =>
diff --git a/src/components/EPubsCard/EPubsCard.test.tsx b/src/components/EPubsCard/EPubsCard.test.tsx
new file mode 100644
index 000000000..e6d380f13
--- /dev/null
+++ b/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()
+
+ 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)
+ })
+})
diff --git a/src/components/EPubsCard/EPubsCard.tsx b/src/components/EPubsCard/EPubsCard.tsx
new file mode 100644
index 000000000..ead7b46c6
--- /dev/null
+++ b/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 (
+
+
Looking for a form?
+
Launch your query on ePubs!
+
+ Search ePubs
+
+
+ )
+}
+
+export default EPubsCard
diff --git a/src/pages/search.tsx b/src/pages/search.tsx
index 6fc25887a..3d2dc8973 100644
--- a/src/pages/search.tsx
+++ b/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}’
+
{results.length > 0 ? (
<>
-
- {results.map((i: SearchResultRecord) => {
- return (
- -
-
-
- )
- })}
-
+
+
+
+
+
+
+
+ {results.map((i: SearchResultRecord) => {
+ return (
+ -
+
+
+ )
+ })}
+
+
+
+
>
) : (
-
- }>
-
-
There are no results that match that query.
-
- It seems you didn’t find what you were looking for. Please
- search again with different keywords.
-
-
-
+
+
+
+
+
+
+ }>
+
+
There are no results that match that query.
+
+ It seems you didn’t find what you were looking for.
+ Please search again with different keywords.
+
+
+
+
+
)}
>
)}
diff --git a/src/styles/pages/search.module.scss b/src/styles/pages/search.module.scss
index 18f5ff1c5..6129b3072 100644
--- a/src/styles/pages/search.module.scss
+++ b/src/styles/pages/search.module.scss
@@ -23,3 +23,7 @@
margin-bottom: units(6);
}
}
+
+.noResults {
+ display: flex;
+}