From 5bffb641a2254df5d0022408edfd366a7f2140b1 Mon Sep 17 00:00:00 2001
From: Nicholas Dalhaug <nicd@equinor.com>
Date: Tue, 13 Oct 2020 14:00:26 +0200
Subject: [PATCH] Typescript support for Search (#660)

---
 .../{Search.test.jsx => Search.test.tsx}      |  2 +-
 .../{Search.tokens.js => Search.tokens.ts}    |  0
 .../src/Search/{Search.jsx => Search.tsx}     | 66 ++++++++-----------
 .../src/Search/{index.js => index.ts}         |  1 -
 4 files changed, 27 insertions(+), 42 deletions(-)
 rename libraries/core-react/src/Search/{Search.test.jsx => Search.test.tsx} (97%)
 rename libraries/core-react/src/Search/{Search.tokens.js => Search.tokens.ts} (100%)
 rename libraries/core-react/src/Search/{Search.jsx => Search.tsx} (88%)
 rename libraries/core-react/src/Search/{index.js => index.ts} (69%)

diff --git a/libraries/core-react/src/Search/Search.test.jsx b/libraries/core-react/src/Search/Search.test.tsx
similarity index 97%
rename from libraries/core-react/src/Search/Search.test.jsx
rename to libraries/core-react/src/Search/Search.test.tsx
index 7e265690e0..b3400e0f7f 100644
--- a/libraries/core-react/src/Search/Search.test.jsx
+++ b/libraries/core-react/src/Search/Search.test.tsx
@@ -115,7 +115,7 @@ describe('Search', () => {
 
     rerender(<Search value="new" />)
 
-    const searchBox = screen.queryByRole('searchbox')
+    const searchBox = screen.queryByRole('searchbox') as HTMLInputElement
 
     expect(searchBox.value).toEqual('new')
   })
diff --git a/libraries/core-react/src/Search/Search.tokens.js b/libraries/core-react/src/Search/Search.tokens.ts
similarity index 100%
rename from libraries/core-react/src/Search/Search.tokens.js
rename to libraries/core-react/src/Search/Search.tokens.ts
diff --git a/libraries/core-react/src/Search/Search.jsx b/libraries/core-react/src/Search/Search.tsx
similarity index 88%
rename from libraries/core-react/src/Search/Search.jsx
rename to libraries/core-react/src/Search/Search.tsx
index e91c3dcfcd..302a5d39a7 100644
--- a/libraries/core-react/src/Search/Search.jsx
+++ b/libraries/core-react/src/Search/Search.tsx
@@ -1,6 +1,4 @@
-// @ts-nocheck
 import React, { useState, useRef, useEffect } from 'react'
-import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
 import { search, close } from '@equinor/eds-icons'
 import { search as tokens } from './Search.tokens'
@@ -29,7 +27,12 @@ const {
   },
 } = tokens
 
-const Container = styled.span`
+type ContainerProps = {
+  isFocused: boolean
+  disabled: boolean
+}
+
+const Container = styled.span<ContainerProps>`
   position: relative;
   background: ${background};
   width: 100%;
@@ -121,7 +124,11 @@ const Input = styled.input`
     `}
 `
 
-const InsideButton = styled.div`
+type InsideButtonProps = {
+  isActive: boolean
+}
+
+const InsideButton = styled.div<InsideButtonProps>`
   display: flex;
   align-items: center;
   visibility: hidden;
@@ -162,17 +169,26 @@ const InsideButton = styled.div`
     `}
 `
 
+type Props = {
+  /** Disabled state */
+  disabled?: boolean
+  /** Default value for search field */
+  defaultValue?: string
+  /** Value for search field */
+  value?: string
+} & React.HTMLAttributes<HTMLInputElement>
+
 export const Search = React.forwardRef(function EdsSearch(
   {
     onChange,
-    defaultValue,
+    defaultValue = '',
     value,
-    className,
-    disabled,
+    className = '',
+    disabled = false,
     onBlur,
     onFocus,
     ...rest
-  },
+  }: Props,
   ref,
 ) {
   const isControlled = typeof value !== 'undefined'
@@ -237,13 +253,13 @@ export const Search = React.forwardRef(function EdsSearch(
       role: 'searchbox',
       'aria-label': 'search input',
       onBlur: (e) => {
-        handleBlur(e)
+        handleBlur()
         if (onBlur) {
           onBlur(e)
         }
       },
       onFocus: (e) => {
-        handleFocus(e)
+        handleFocus()
         if (onFocus) {
           onFocus(e)
         }
@@ -282,34 +298,4 @@ export const Search = React.forwardRef(function EdsSearch(
   )
 })
 
-Search.propTypes = {
-  /** @ignore */
-  className: PropTypes.string,
-  /** Placeholder */
-  placeholder: PropTypes.string,
-  /** Disabled state */
-  disabled: PropTypes.bool,
-  /** onChange handler */
-  onChange: PropTypes.func,
-  /** Default value for search field */
-  defaultValue: PropTypes.string,
-  /** Value for search field */
-  value: PropTypes.string,
-  /** onBlur handler */
-  onBlur: PropTypes.func,
-  /** onFocus handler */
-  onFocus: PropTypes.func,
-}
-
-Search.defaultProps = {
-  className: '',
-  placeholder: '',
-  disabled: false,
-  onChange: undefined,
-  defaultValue: '',
-  value: undefined,
-  onBlur: undefined,
-  onFocus: undefined,
-}
-
 Search.displayName = 'eds-search'
diff --git a/libraries/core-react/src/Search/index.js b/libraries/core-react/src/Search/index.ts
similarity index 69%
rename from libraries/core-react/src/Search/index.js
rename to libraries/core-react/src/Search/index.ts
index 2c96d80a38..beb1384d91 100644
--- a/libraries/core-react/src/Search/index.js
+++ b/libraries/core-react/src/Search/index.ts
@@ -1,2 +1 @@
-// @ts-nocheck
 export { Search } from './Search'