Merge branch 'develop' into em-create-header-component-#83

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## UNRELEASED
+
+- Added search component
+
 ## [1.2.0] - 2020-04-30
 
 - Added new Alert styles (slim, no icon) and allow the Alert to accept `div` attributes as props

src/components/Search/Search.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Search } from './Search'
+
+export default {
+  title: 'Search',
+  parameters: {
+    info: `
+USWDS 2.0 Search component
+
+Source: https://designsystem.digital.gov/components/header/
+`,
+  },
+}
+
+const mockSubmit = (): void => {
+  /* mock submit fn */
+}
+
+export const defaultSearch = (): React.ReactElement => (
+  <Search onSubmit={mockSubmit} />
+)
+
+export const bigSearch = (): React.ReactElement => (
+  <Search big onSubmit={mockSubmit} />
+)
+
+export const smallSearch = (): React.ReactElement => (
+  <Search small onSubmit={mockSubmit} />
+)

src/components/Search/Search.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+
+import { Search } from './Search'
+
+describe('Search component', () => {
+  it('renders without errors', () => {
+    const mockSubmit = jest.fn()
+    const { queryByTestId } = render(<Search onSubmit={mockSubmit}></Search>)
+    expect(queryByTestId('textInput')).toBeInTheDocument()
+  })
+
+  it('implements an onSubmit handler', () => {
+    const mockSubmit = jest.fn()
+    const { getByTestId } = render(<Search onSubmit={mockSubmit}></Search>)
+
+    fireEvent.submit(getByTestId('textInput'))
+    expect(mockSubmit).toHaveBeenCalledTimes(1)
+  })
+})

src/components/Search/Search.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { Button } from '../Button/Button'
+import { Form } from '../forms/Form/Form'
+import { Label } from '../forms/Label/Label'
+import { TextInput } from '../forms/TextInput/TextInput'
+
+interface SearchInputProps {
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+  big?: boolean
+  small?: boolean
+  label?: React.ReactNode
+  className?: string
+}
+
+export const Search = (
+  props: SearchInputProps & React.FormHTMLAttributes<HTMLFormElement>
+): React.ReactElement => {
+  const {
+    onSubmit,
+    big,
+    small,
+    label = 'Search',
+    className,
+    ...formProps
+  } = props
+  const classes = classnames(
+    'usa-search',
+    {
+      'usa-search--small': small,
+      'usa-search--big': big,
+    },
+    className
+  )
+
+  return (
+    <Form
+      onSubmit={onSubmit}
+      className={classes}
+      role="search"
+      search={true}
+      {...formProps}>
+      <Label srOnly={true} htmlFor="search-field">
+        {label}
+      </Label>
+      <TextInput id="search-field" type="search" name="search" />
+      <Button type="submit">
+        <span className={small ? 'usa-sr-only' : 'usa-search__submit-text'}>
+          Search
+        </span>
+      </Button>
+    </Form>
+  )
+}
+
+export default Search

src/components/forms/Form/Form.tsx

@@ -6,16 +6,20 @@ interface FormProps {
   onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
   className?: string
   large?: boolean
+  search?: boolean
 }
 
 export const Form = (
   props: FormProps & React.FormHTMLAttributes<HTMLFormElement>
 ): React.ReactElement => {
-  const { onSubmit, children, className, large, ...formProps } = props
+  const { onSubmit, children, className, large, search, ...formProps } = props
 
   const classes = classnames(
-    'usa-form',
-    { 'usa-form--large': large },
+    {
+      'usa-form': !search,
+      'usa-search': search,
+      'usa-form--large': large,
+    },
     className
   )
 

src/components/forms/Label/Label.tsx

@@ -7,14 +7,18 @@ interface LabelProps {
   className?: string
   error?: boolean
   hint?: React.ReactNode
+  srOnly?: boolean
 }
 
 export const Label = (props: LabelProps): React.ReactElement => {
-  const { children, htmlFor, className, error, hint } = props
+  const { children, htmlFor, className, error, hint, srOnly } = props
 
   const classes = classnames(
-    'usa-label',
-    { 'usa-label--error': error },
+    {
+      'usa-label': !srOnly,
+      'usa-sr-only': srOnly,
+      'usa-label--error': error,
+    },
     className
   )