fix(Search): Add placeholder to Search input #403 (#415)

Co-authored-by: Schaffer Stewart <schaestewart@gmail.com>

src/components/Search/Search.stories.tsx

@@ -26,5 +26,9 @@ export const bigSearch = (): React.ReactElement => (
 )
 
 export const smallSearch = (): React.ReactElement => (
-  <Search size="small" onSubmit={mockSubmit} />
+  <Search
+    placeholder="(Optional) Placeholder Text"
+    size="small"
+    onSubmit={mockSubmit}
+  />
 )

src/components/Search/Search.test.tsx

@@ -20,6 +20,18 @@ describe('Search component', () => {
     expect(mockSubmit).toHaveBeenCalledTimes(1)
   })
 
+  it('renders a placeholder', () => {
+    const mockSubmit = jest.fn()
+    const placeholder = 'Search here'
+    const { queryByTestId } = render(
+      <Search onSubmit={mockSubmit} placeholder={placeholder}></Search>
+    )
+    expect(queryByTestId('textInput')).toHaveAttribute(
+      'placeholder',
+      placeholder
+    )
+  })
+
   describe('renders size classes', () => {
     beforeEach(() => {
       jest.clearAllMocks()

src/components/Search/Search.tsx

@@ -22,6 +22,7 @@ interface SearchInputProps {
   small?: boolean
   label?: React.ReactNode
   className?: string
+  placeholder?: string
 }
 
 export const Search = (
@@ -36,6 +37,7 @@ export const Search = (
     small,
     label = 'Search',
     className,
+    placeholder,
     ...formProps
   } = props
   if (big) {
@@ -66,7 +68,12 @@ export const Search = (
       <Label srOnly={true} htmlFor={inputId}>
         {label}
       </Label>
-      <TextInput id={inputId} type="search" name={inputName} />
+      <TextInput
+        id={inputId}
+        type="search"
+        name={inputName}
+        placeholder={placeholder}
+      />
       <Button type="submit">
         <span className={isSmall ? 'usa-sr-only' : 'usa-search__submit-text'}>
           Search