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 ( -
  1. - -
  2. - ) - })} -
+ + + + + + +
    + {results.map((i: SearchResultRecord) => { + return ( +
  1. + +
  2. + ) + })} +
+
+
+ ) : ( - - }> -
-

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; +}