Migrate FilteredSearch to TypeScript

.changeset/wet-mayflies-talk.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `FilteredSearch` to TypeScript

src/FilteredSearch.js → src/FilteredSearch.tsx

@@ -1,9 +1,11 @@
-import styled from 'styled-components'
 import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from './constants'
 import theme from './theme'
-import {COMMON, get} from './constants'
+import {ComponentProps} from './utils/types'
+import sx, {SxProp} from './sx'
 
-const FilteredSearch = styled.div`
+const FilteredSearch = styled.div<SystemCommonProps & SxProp>`
   ${COMMON};
   display: flex;
   align-items: stretch;
@@ -20,6 +22,8 @@ const FilteredSearch = styled.div`
     border-bottom-right-radius: ${get('radii.2')};
     z-index: 1; // Allows the focus outline to show on top of the dropdown.
   }
+
+  ${sx}
 `
 
 FilteredSearch.defaultProps = {
@@ -28,7 +32,9 @@ FilteredSearch.defaultProps = {
 
 FilteredSearch.propTypes = {
   ...COMMON.propTypes,
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  ...sx.propTypes
 }
 
+export type FilteredSearchProps = ComponentProps<typeof FilteredSearch>
 export default FilteredSearch

src/__tests__/FilteredSearch.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {FilteredSearch} from '..'
+import {render, behavesAsComponent, checkExports} from '../utils/testing'
+import {COMMON} from '../constants'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+expect.extend(toHaveNoViolations)
+
+describe('FilteredSearch', () => {
+  behavesAsComponent(FilteredSearch, [COMMON])
+
+  checkExports('FilteredSearch', {
+    default: FilteredSearch
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<FilteredSearch>Hello</FilteredSearch>)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('renders a <div>', () => {
+    expect(render(<FilteredSearch />).type).toEqual('div')
+  })
+})

src/__tests__/__snapshots__/FilteredSearch.tsx.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilteredSearch renders consistently 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.c0 summary {
+  border-radius: 0;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  border-right: 0;
+}
+
+.c0 .TextInput-wrapper {
+  border-radius: 0;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  z-index: 1;
+}
+
+<div
+  className="c0"
+/>
+`;