From 1ed6afdc18829e79681b00e6a5197450174e4016 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 16 Jul 2020 16:15:00 -0300
Subject: [PATCH 01/32] Add popover style and decouple component

---
 react/LocationSearch.tsx      |  5 ++--
 react/components/Combobox.css | 23 ++++++++++++++++++
 react/components/Combobox.tsx | 44 +++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 react/components/Combobox.css
 create mode 100644 react/components/Combobox.tsx

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index eeacad8..5901255 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -1,15 +1,14 @@
 import React, { useState, useMemo } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { Input, IconSearch, IconClear } from 'vtex.styleguide'
+
 import {
   Combobox,
   ComboboxInput,
   ComboboxOption,
   ComboboxPopover,
   ComboboxList,
-} from '@reach/combobox'
-import '@reach/combobox/styles.css'
-
+} from './components/Combobox'
 import { addresses as mockedAddresses } from './addresses'
 import styles from './LocationSearch.css'
 
diff --git a/react/components/Combobox.css b/react/components/Combobox.css
new file mode 100644
index 0000000..bb16547
--- /dev/null
+++ b/react/components/Combobox.css
@@ -0,0 +1,23 @@
+:root {
+  --reach-combobox: 1;
+}
+
+.option:not([aria-selected="true"]) {
+  background-color: transparent;
+}
+
+.option:not([data-current=""]) {
+  padding-left: 2.125rem;
+}
+
+.option[data-current=""] {
+  padding-left: 0;
+}
+
+.option[data-current=""] .selectedIcon {
+  display: block;
+}
+
+.popover {
+  box-shadow: 0px 1px 16px rgba(46, 46, 46, 0.12);
+}
\ No newline at end of file
diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
new file mode 100644
index 0000000..dcee188
--- /dev/null
+++ b/react/components/Combobox.tsx
@@ -0,0 +1,44 @@
+import {
+  Combobox as ReachCombobox,
+  ComboboxInput as ReachComboboxInput,
+  ComboboxInputProps as ReachComboboxInputProps,
+  ComboboxPopover as ReachComboboxPopover,
+  ComboboxPopoverProps as ReachComboboxPopoverProps,
+  ComboboxList as ReachComboboxList,
+  ComboboxListProps as ReachComboboxListProps,
+  ComboboxOption as ReachComboboxOption,
+  ComboboxOptionProps as ReachComboboxOptionProps,
+} from '@reach/combobox'
+import React from 'react'
+import classNames from 'classnames'
+
+import styles from './Combobox.css'
+
+export const Combobox = ReachCombobox
+
+export const ComboboxInput = ReachComboboxInput
+
+export const ComboboxPopover: React.FC<ReachComboboxPopoverProps & {
+  className?: string
+}> = ({ className, ...props }) => (
+  <ReachComboboxPopover
+    {...props}
+    className={classNames(
+      className,
+      styles.popover,
+      'bg-base list ma0 pa0 outline-0'
+    )}
+  />
+)
+
+export const ComboboxList = ReachComboboxList
+
+export const ComboboxOption = ReachComboboxOption
+
+export default {
+  Combobox,
+  ComboboxInput,
+  ComboboxPopover,
+  ComboboxList,
+  ComboboxOption,
+}

From 965707d1f04cbf1d08f8b4defb233d67862f0600 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 16 Jul 2020 16:55:20 -0300
Subject: [PATCH 02/32] Add list style

---
 react/components/Combobox.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
index dcee188..c298c8a 100644
--- a/react/components/Combobox.tsx
+++ b/react/components/Combobox.tsx
@@ -31,7 +31,14 @@ export const ComboboxPopover: React.FC<ReachComboboxPopoverProps & {
   />
 )
 
-export const ComboboxList = ReachComboboxList
+export const ComboboxList: React.FC<ReachComboboxListProps & {
+  className?: string
+}> = ({ className, ...props }) => (
+  <ReachComboboxList
+    {...props}
+    className={classNames(className, 'bg-base list ma0 pa0 outline-0')}
+  />
+)
 
 export const ComboboxOption = ReachComboboxOption
 

From 77ae1f54da328792a635c85a5247261ba6eaaba8 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 16 Jul 2020 17:31:13 -0300
Subject: [PATCH 03/32] Add kind of broken Option

---
 react/components/Combobox.tsx | 37 ++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
index c298c8a..71864a4 100644
--- a/react/components/Combobox.tsx
+++ b/react/components/Combobox.tsx
@@ -8,6 +8,7 @@ import {
   ComboboxListProps as ReachComboboxListProps,
   ComboboxOption as ReachComboboxOption,
   ComboboxOptionProps as ReachComboboxOptionProps,
+  ComboboxOptionText as ReachComboboxOptionText,
 } from '@reach/combobox'
 import React from 'react'
 import classNames from 'classnames'
@@ -40,7 +41,41 @@ export const ComboboxList: React.FC<ReachComboboxListProps & {
   />
 )
 
-export const ComboboxOption = ReachComboboxOption
+const Icon: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="16"
+    viewBox="0 0 14 16"
+    fill="none"
+  >
+    <path
+      d="M7.04917 0C3.12177 0 0 3.1 0 7C0 8.56189 0.476353 10.0562 1.42906 11.2607C1.50908 11.3782 1.60101 11.4919 1.70535 11.6007L5.19589 15.2393C5.63744 15.6996 6.21111 15.9534 6.79833 16.0006C6.97371 16.0366 7.15342 16.0328 7.31309 15.9891C7.86105 15.9204 8.39053 15.6705 8.80411 15.2393L12.2946 11.6007C12.4052 11.4855 12.5017 11.3647 12.585 11.2399C13.5268 10.039 13.9976 8.55289 13.9976 7C14.0983 3.1 10.9766 0 7.04917 0ZM9.56673 6.5C9.56673 7.88071 8.43958 9 7.04917 9C5.65876 9 4.53161 7.88071 4.53161 6.5C4.53161 5.11929 5.65876 4 7.04917 4C8.43958 4 9.56673 5.11929 9.56673 6.5Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export const ComboboxOption: React.FC<ReachComboboxOptionProps & {
+  className?: string
+}> = ({ className, children, ...props }) => (
+  <ReachComboboxOption
+    {...props}
+    className={classNames(
+      className,
+      styles.option,
+      'flex-nowrap truncate items-center pointer bg-action-secondary pv3 pr7'
+    )}
+  >
+    {children ?? (
+      <>
+        <Icon />
+        <ReachComboboxOptionText />
+      </>
+    )}
+  </ReachComboboxOption>
+)
 
 export default {
   Combobox,

From cb9a8c21e78cbba9eb11c3878543d7983b009d31 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 16 Jul 2020 17:55:03 -0300
Subject: [PATCH 04/32] Fix popover style

---
 react/components/Combobox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
index 71864a4..2ae89db 100644
--- a/react/components/Combobox.tsx
+++ b/react/components/Combobox.tsx
@@ -27,7 +27,7 @@ export const ComboboxPopover: React.FC<ReachComboboxPopoverProps & {
     className={classNames(
       className,
       styles.popover,
-      'bg-base list ma0 pa0 outline-0'
+      'bg-base pv3 mt2 br2 ba bw1 b--muted-4 absolute outline-0'
     )}
   />
 )

From 1b5735653fb8bc0a92843493a301f8e7a8746436 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 16 Jul 2020 18:42:58 -0300
Subject: [PATCH 05/32] Fix option alignment a little bit

---
 react/components/Combobox.css | 12 ------------
 react/components/Combobox.tsx |  2 +-
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/react/components/Combobox.css b/react/components/Combobox.css
index bb16547..72459d6 100644
--- a/react/components/Combobox.css
+++ b/react/components/Combobox.css
@@ -6,18 +6,6 @@
   background-color: transparent;
 }
 
-.option:not([data-current=""]) {
-  padding-left: 2.125rem;
-}
-
-.option[data-current=""] {
-  padding-left: 0;
-}
-
-.option[data-current=""] .selectedIcon {
-  display: block;
-}
-
 .popover {
   box-shadow: 0px 1px 16px rgba(46, 46, 46, 0.12);
 }
\ No newline at end of file
diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
index 2ae89db..e0b177a 100644
--- a/react/components/Combobox.tsx
+++ b/react/components/Combobox.tsx
@@ -70,7 +70,7 @@ export const ComboboxOption: React.FC<ReachComboboxOptionProps & {
   >
     {children ?? (
       <>
-        <Icon />
+        <Icon className="ml5 mr4" />
         <ReachComboboxOptionText />
       </>
     )}

From afa5148f15697ad03da9de0e833ce9a088da2076 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Tue, 21 Jul 2020 14:52:54 -0300
Subject: [PATCH 06/32] Put drop-down in the right place

---
 react/LocationSearch.tsx      | 73 ++++++++++++++++++++---------------
 react/components/Combobox.tsx | 33 +++++++++-------
 2 files changed, 62 insertions(+), 44 deletions(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 5901255..028d2a4 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -1,6 +1,7 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useRef } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { Input, IconSearch, IconClear } from 'vtex.styleguide'
+import { positionMatchWidth } from '@reach/popover'
 
 import {
   Combobox,
@@ -31,6 +32,7 @@ interface LocationSearchProps {
 const LocationSearch: React.FC<LocationSearchProps> = ({ onSelectAddress }) => {
   const [searchTerm, setSearchTerm] = useState<string>('')
   const addresses = useMemo(() => getAddresses(searchTerm), [searchTerm])
+  const inputWrapperEl = useRef<HTMLDivElement>(null)
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key !== 'Escape') {
@@ -47,38 +49,47 @@ const LocationSearch: React.FC<LocationSearchProps> = ({ onSelectAddress }) => {
   return (
     <div className={`${styles.locationSearch} w-100`}>
       <Combobox onSelect={handleAddressSelection}>
-        <ComboboxInput
-          as={Input}
-          testId="location-search-input"
-          label={
-            <FormattedMessage id="place-components.label.autocompleteAddress" />
-          }
-          prefix={
-            <div className="c-action-primary flex justify-center items-center">
-              <IconSearch />
-            </div>
-          }
-          suffix={
-            searchTerm.trim().length && (
-              <span
-                data-testid="location-search-clear"
-                role="button"
-                tabIndex={-1}
-                className="pointer c-muted-3 flex justify-center items-center outline-0"
-                onClick={() => setSearchTerm('')}
-                onKeyPress={() => {}}
-              >
-                <IconClear />
-              </span>
+        <div ref={inputWrapperEl}>
+          <ComboboxInput
+            as={Input}
+            testId="location-search-input"
+            label={
+              <FormattedMessage id="place-components.label.autocompleteAddress" />
+            }
+            prefix={
+              <div className="c-action-primary flex justify-center items-center">
+                <IconSearch />
+              </div>
+            }
+            suffix={
+              searchTerm.trim().length && (
+                <span
+                  data-testid="location-search-clear"
+                  role="button"
+                  tabIndex={-1}
+                  className="pointer c-muted-3 flex justify-center items-center outline-0"
+                  onClick={() => setSearchTerm('')}
+                  onKeyPress={() => {}}
+                >
+                  <IconClear />
+                </span>
+              )
+            }
+            value={searchTerm}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              setSearchTerm(event.target.value)
+            }
+            onKeyDown={handleKeyDown}
+          />
+        </div>
+        <ComboboxPopover
+          position={(_targetRect, popoverRect) =>
+            positionMatchWidth(
+              inputWrapperEl.current?.getBoundingClientRect(),
+              popoverRect
             )
           }
-          value={searchTerm}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            setSearchTerm(event.target.value)
-          }
-          onKeyDown={handleKeyDown}
-        />
-        <ComboboxPopover>
+        >
           {addresses.length > 0 ? (
             <ComboboxList>
               {addresses.map((address, index) => (
diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
index e0b177a..de9403b 100644
--- a/react/components/Combobox.tsx
+++ b/react/components/Combobox.tsx
@@ -10,7 +10,8 @@ import {
   ComboboxOptionProps as ReachComboboxOptionProps,
   ComboboxOptionText as ReachComboboxOptionText,
 } from '@reach/combobox'
-import React from 'react'
+import { PopoverProps } from '@reach/popover'
+import React, { forwardRef } from 'react'
 import classNames from 'classnames'
 
 import styles from './Combobox.css'
@@ -19,18 +20,24 @@ export const Combobox = ReachCombobox
 
 export const ComboboxInput = ReachComboboxInput
 
-export const ComboboxPopover: React.FC<ReachComboboxPopoverProps & {
-  className?: string
-}> = ({ className, ...props }) => (
-  <ReachComboboxPopover
-    {...props}
-    className={classNames(
-      className,
-      styles.popover,
-      'bg-base pv3 mt2 br2 ba bw1 b--muted-4 absolute outline-0'
-    )}
-  />
-)
+export const ComboboxPopover = forwardRef<
+  HTMLDivElement,
+  ReachComboboxPopoverProps &
+    Partial<PopoverProps> &
+    React.RefAttributes<HTMLDivElement>
+>(function ComboboxPopover({ className, ...props }, ref) {
+  return (
+    <ReachComboboxPopover
+      {...props}
+      ref={ref}
+      className={classNames(
+        className,
+        styles.popover,
+        'bg-base pv3 mt2 br2 ba bw1 b--muted-4 absolute outline-0'
+      )}
+    />
+  )
+})
 
 export const ComboboxList: React.FC<ReachComboboxListProps & {
   className?: string

From a643966fbefd32748a3c7c7d176a617e742fbe3f Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Tue, 21 Jul 2020 15:06:29 -0300
Subject: [PATCH 07/32] Use symetric padding on Option and fix icon shrink

---
 react/components/Combobox.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
index de9403b..9d45b6e 100644
--- a/react/components/Combobox.tsx
+++ b/react/components/Combobox.tsx
@@ -72,13 +72,15 @@ export const ComboboxOption: React.FC<ReachComboboxOptionProps & {
     className={classNames(
       className,
       styles.option,
-      'flex-nowrap truncate items-center pointer bg-action-secondary pv3 pr7'
+      'flex truncate items-center pointer bg-action-secondary pv3 ph5'
     )}
   >
     {children ?? (
       <>
-        <Icon className="ml5 mr4" />
-        <ReachComboboxOptionText />
+        <Icon className="flex-shrink-0 mr4" />
+        <div className="truncate">
+          <ReachComboboxOptionText />
+        </div>
       </>
     )}
   </ReachComboboxOption>

From fe3e4fa368574e9f9ab8afe5d1c75bac59a895e1 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Tue, 21 Jul 2020 15:34:22 -0300
Subject: [PATCH 08/32] Add styling on msg displayed when the search fails

---
 react/LocationSearch.tsx      | 11 +++++++++--
 react/components/Combobox.tsx |  1 -
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 028d2a4..4d06a32 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useRef } from 'react'
 import { FormattedMessage } from 'react-intl'
-import { Input, IconSearch, IconClear } from 'vtex.styleguide'
+import { Input, IconSearch, IconClear, IconWarning } from 'vtex.styleguide'
 import { positionMatchWidth } from '@reach/popover'
 
 import {
@@ -97,7 +97,14 @@ const LocationSearch: React.FC<LocationSearchProps> = ({ onSelectAddress }) => {
               ))}
             </ComboboxList>
           ) : (
-            <FormattedMessage id="place-components.label.autocompleteAddressFail" />
+            <div className="flex truncate items-center pv3 ph5">
+              <div className="flex flex-shrink-0 mr4">
+                <IconWarning />
+              </div>
+              <div className="truncate">
+                <FormattedMessage id="place-components.label.autocompleteAddressFail" />
+              </div>
+            </div>
           )}
         </ComboboxPopover>
       </Combobox>
diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
index 9d45b6e..dfabb9f 100644
--- a/react/components/Combobox.tsx
+++ b/react/components/Combobox.tsx
@@ -1,7 +1,6 @@
 import {
   Combobox as ReachCombobox,
   ComboboxInput as ReachComboboxInput,
-  ComboboxInputProps as ReachComboboxInputProps,
   ComboboxPopover as ReachComboboxPopover,
   ComboboxPopoverProps as ReachComboboxPopoverProps,
   ComboboxList as ReachComboboxList,

From 3bc5d5cc25d6794661ff01116860114bcd5330d4 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Tue, 21 Jul 2020 16:11:02 -0300
Subject: [PATCH 09/32] Remove redundant truncate and make fail msg grey

---
 react/LocationSearch.tsx      | 2 +-
 react/components/Combobox.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 4d06a32..b9ef9ae 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -97,7 +97,7 @@ const LocationSearch: React.FC<LocationSearchProps> = ({ onSelectAddress }) => {
               ))}
             </ComboboxList>
           ) : (
-            <div className="flex truncate items-center pv3 ph5">
+            <div className="flex items-center pv3 ph5 c-disabled">
               <div className="flex flex-shrink-0 mr4">
                 <IconWarning />
               </div>
diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
index dfabb9f..35f7664 100644
--- a/react/components/Combobox.tsx
+++ b/react/components/Combobox.tsx
@@ -71,7 +71,7 @@ export const ComboboxOption: React.FC<ReachComboboxOptionProps & {
     className={classNames(
       className,
       styles.option,
-      'flex truncate items-center pointer bg-action-secondary pv3 ph5'
+      'flex items-center pointer bg-action-secondary pv3 ph5'
     )}
   >
     {children ?? (

From dae152f41b0406ae0cabb906f48a5356352faf3a Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Tue, 21 Jul 2020 16:12:27 -0300
Subject: [PATCH 10/32] Add big addresses so we can test text overflow

---
 react/addresses.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/react/addresses.tsx b/react/addresses.tsx
index e1406e6..9598bd9 100644
--- a/react/addresses.tsx
+++ b/react/addresses.tsx
@@ -1,4 +1,6 @@
 export const addresses: string[] = [
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil itaque repellendus adipisci ex ipsum beatae iure. Tenetur ea, veritatis libero unde consectetur eaque sunt debitis soluta reiciendis non. Ad, non.',
+  'The quick brown fox jumps over the lazy dog',
   '9 Twin Pines Point',
   '93800 Eggendart Center',
   '17 Warrior Drive',

From 1e11bbe71e5258d94c64cf4673a78737afb926d7 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Tue, 21 Jul 2020 16:14:09 -0300
Subject: [PATCH 11/32] =?UTF-8?q?Shortnen=20spanish=20text=20so=20it=20fit?=
 =?UTF-8?q?s=20the=20component=20(gracias=20Maxito=20=F0=9F=87=A6?=
 =?UTF-8?q?=F0=9F=87=B7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 messages/es.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/messages/es.json b/messages/es.json
index 317dac0..b9e6eba 100644
--- a/messages/es.json
+++ b/messages/es.json
@@ -27,5 +27,5 @@
   "place-components.label.postalCode": "Código Postal",
   "place-components.label.dontKnowPostalCode": "No conozco mi código postal",
   "place-components.label.autocompleteAddress": "Dirección y número",
-  "place-components.label.autocompleteAddressFail": "No se han encontrado resultados"
+  "place-components.label.autocompleteAddressFail": "Sin resultados"
 }

From 88b062b45468ea906fa88f08bf30f5bc166873ec Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Tue, 21 Jul 2020 16:35:36 -0300
Subject: [PATCH 12/32] Add Option bg color on hover

Notes:
- there is no #DBE9FD as common bg color on Tachyons
- used bg-action-secondary for aria-selected (#EEF3F7) instead
---
 react/components/Combobox.css | 2 +-
 react/components/Combobox.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/react/components/Combobox.css b/react/components/Combobox.css
index 72459d6..6d3124c 100644
--- a/react/components/Combobox.css
+++ b/react/components/Combobox.css
@@ -2,7 +2,7 @@
   --reach-combobox: 1;
 }
 
-.option:not([aria-selected="true"]) {
+.option:not([aria-selected="true"]).option:not(:hover) {
   background-color: transparent;
 }
 
diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
index 35f7664..78b5995 100644
--- a/react/components/Combobox.tsx
+++ b/react/components/Combobox.tsx
@@ -71,7 +71,7 @@ export const ComboboxOption: React.FC<ReachComboboxOptionProps & {
     className={classNames(
       className,
       styles.option,
-      'flex items-center pointer bg-action-secondary pv3 ph5'
+      'flex items-center pointer bg-action-secondary pv3 ph5 hover-bg-action-secondary'
     )}
   >
     {children ?? (

From 7127d88e4bc4f5e813f9bd97306d0f60521d1c0d Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Tue, 21 Jul 2020 18:56:01 -0300
Subject: [PATCH 13/32] Add mocked Google logo

---
 react/LocationSearch.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index b9ef9ae..126f85c 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -12,6 +12,7 @@ import {
 } from './components/Combobox'
 import { addresses as mockedAddresses } from './addresses'
 import styles from './LocationSearch.css'
+import GoogleLogo from './powered_by_google.png'
 
 const MAX_DROPDOWN_ADDRESSES = 6
 
@@ -91,11 +92,16 @@ const LocationSearch: React.FC<LocationSearchProps> = ({ onSelectAddress }) => {
           }
         >
           {addresses.length > 0 ? (
-            <ComboboxList>
-              {addresses.map((address, index) => (
-                <ComboboxOption value={address} key={index} />
-              ))}
-            </ComboboxList>
+            <>
+              <ComboboxList>
+                {addresses.map((address, index) => (
+                  <ComboboxOption value={address} key={index} />
+                ))}
+              </ComboboxList>
+              <div className="flex flex-row-reverse">
+                <img className="h1 mt3 mb1 mh5" src={GoogleLogo} alt="ah" />
+              </div>
+            </>
           ) : (
             <div className="flex items-center pv3 ph5 c-disabled">
               <div className="flex flex-shrink-0 mr4">

From abe13265ff7bddd99dcda5180dc3a59d4faca9b3 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Wed, 22 Jul 2020 12:00:03 -0300
Subject: [PATCH 14/32] Add prop for engine logo

---
 react/LocationSearch.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 126f85c..0f37d43 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -12,7 +12,6 @@ import {
 } from './components/Combobox'
 import { addresses as mockedAddresses } from './addresses'
 import styles from './LocationSearch.css'
-import GoogleLogo from './powered_by_google.png'
 
 const MAX_DROPDOWN_ADDRESSES = 6
 
@@ -28,9 +27,15 @@ const getAddresses = (searchTerm: string) => {
 
 interface LocationSearchProps {
   onSelectAddress?: (selectedAddress: string) => void
+  renderEngineLogo?: (
+    props: React.ImgHTMLAttributes<HTMLImageElement> & { className?: string }
+  ) => HTMLImageElement
 }
 
-const LocationSearch: React.FC<LocationSearchProps> = ({ onSelectAddress }) => {
+const LocationSearch: React.FC<LocationSearchProps> = ({
+  onSelectAddress,
+  renderEngineLogo,
+}) => {
   const [searchTerm, setSearchTerm] = useState<string>('')
   const addresses = useMemo(() => getAddresses(searchTerm), [searchTerm])
   const inputWrapperEl = useRef<HTMLDivElement>(null)
@@ -98,9 +103,11 @@ const LocationSearch: React.FC<LocationSearchProps> = ({ onSelectAddress }) => {
                   <ComboboxOption value={address} key={index} />
                 ))}
               </ComboboxList>
-              <div className="flex flex-row-reverse">
-                <img className="h1 mt3 mb1 mh5" src={GoogleLogo} alt="ah" />
-              </div>
+              {renderEngineLogo && (
+                <div className="flex flex-row-reverse">
+                  {renderEngineLogo({ className: 'h1 mt3 mb1 mh5' })}
+                </div>
+              )}
             </>
           ) : (
             <div className="flex items-center pv3 ph5 c-disabled">

From a01363577d40f656868bb6afcbd6cbefb08d400e Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 23 Jul 2020 13:58:25 -0400
Subject: [PATCH 15/32] Refactor ref variable name

---
 react/LocationSearch.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 0f37d43..e1d5619 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -38,7 +38,7 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
 }) => {
   const [searchTerm, setSearchTerm] = useState<string>('')
   const addresses = useMemo(() => getAddresses(searchTerm), [searchTerm])
-  const inputWrapperEl = useRef<HTMLDivElement>(null)
+  const inputWrapperRef = useRef<HTMLDivElement>(null)
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key !== 'Escape') {
@@ -55,7 +55,7 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
   return (
     <div className={`${styles.locationSearch} w-100`}>
       <Combobox onSelect={handleAddressSelection}>
-        <div ref={inputWrapperEl}>
+        <div ref={inputWrapperRef}>
           <ComboboxInput
             as={Input}
             testId="location-search-input"
@@ -91,7 +91,7 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
         <ComboboxPopover
           position={(_targetRect, popoverRect) =>
             positionMatchWidth(
-              inputWrapperEl.current?.getBoundingClientRect(),
+              inputWrapperRef.current?.getBoundingClientRect(),
               popoverRect
             )
           }

From 72e205d0fa404b2375bf39b41daeb4ffa9378089 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 23 Jul 2020 14:46:13 -0400
Subject: [PATCH 16/32] Document why we clear button isn't tabbable

---
 react/LocationSearch.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index e1d5619..8b3a139 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -72,6 +72,8 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
                 <span
                   data-testid="location-search-clear"
                   role="button"
+                  // the input can be cleared by pressing the esc key,
+                  // so the clear button should not be tabbable
                   tabIndex={-1}
                   className="pointer c-muted-3 flex justify-center items-center outline-0"
                   onClick={() => setSearchTerm('')}

From 5156127dd3cd19cc318e7c4459b34a6fe96e9304 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 23 Jul 2020 15:57:05 -0400
Subject: [PATCH 17/32] Stop sending props to renderEngineLogo

---
 react/LocationSearch.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 8b3a139..0ebd513 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -27,9 +27,7 @@ const getAddresses = (searchTerm: string) => {
 
 interface LocationSearchProps {
   onSelectAddress?: (selectedAddress: string) => void
-  renderEngineLogo?: (
-    props: React.ImgHTMLAttributes<HTMLImageElement> & { className?: string }
-  ) => HTMLImageElement
+  renderEngineLogo?: () => React.ReactNode
 }
 
 const LocationSearch: React.FC<LocationSearchProps> = ({
@@ -107,7 +105,7 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
               </ComboboxList>
               {renderEngineLogo && (
                 <div className="flex flex-row-reverse">
-                  {renderEngineLogo({ className: 'h1 mt3 mb1 mh5' })}
+                  <div className="mt3 mb1 mh5">{renderEngineLogo()}</div>
                 </div>
               )}
             </>

From d2c3da5924b3c27a4ea6839f57ac655b884e44cb Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 23 Jul 2020 16:32:47 -0400
Subject: [PATCH 18/32] Decouple Place Icon from Combobox component

---
 react/LocationSearch.tsx       |  7 ++++++-
 react/components/Combobox.tsx  | 23 +++++------------------
 react/components/PlaceIcon.tsx | 19 +++++++++++++++++++
 3 files changed, 30 insertions(+), 19 deletions(-)
 create mode 100644 react/components/PlaceIcon.tsx

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 0ebd513..faa8771 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -12,6 +12,7 @@ import {
 } from './components/Combobox'
 import { addresses as mockedAddresses } from './addresses'
 import styles from './LocationSearch.css'
+import PlaceIcon from './components/PlaceIcon'
 
 const MAX_DROPDOWN_ADDRESSES = 6
 
@@ -100,7 +101,11 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
             <>
               <ComboboxList>
                 {addresses.map((address, index) => (
-                  <ComboboxOption value={address} key={index} />
+                  <ComboboxOption
+                    renderIcon={() => <PlaceIcon />}
+                    value={address}
+                    key={index}
+                  />
                 ))}
               </ComboboxList>
               {renderEngineLogo && (
diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
index 78b5995..b47f9b7 100644
--- a/react/components/Combobox.tsx
+++ b/react/components/Combobox.tsx
@@ -47,25 +47,10 @@ export const ComboboxList: React.FC<ReachComboboxListProps & {
   />
 )
 
-const Icon: React.FC<React.SVGProps<SVGSVGElement>> = props => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    width="14"
-    height="16"
-    viewBox="0 0 14 16"
-    fill="none"
-  >
-    <path
-      d="M7.04917 0C3.12177 0 0 3.1 0 7C0 8.56189 0.476353 10.0562 1.42906 11.2607C1.50908 11.3782 1.60101 11.4919 1.70535 11.6007L5.19589 15.2393C5.63744 15.6996 6.21111 15.9534 6.79833 16.0006C6.97371 16.0366 7.15342 16.0328 7.31309 15.9891C7.86105 15.9204 8.39053 15.6705 8.80411 15.2393L12.2946 11.6007C12.4052 11.4855 12.5017 11.3647 12.585 11.2399C13.5268 10.039 13.9976 8.55289 13.9976 7C14.0983 3.1 10.9766 0 7.04917 0ZM9.56673 6.5C9.56673 7.88071 8.43958 9 7.04917 9C5.65876 9 4.53161 7.88071 4.53161 6.5C4.53161 5.11929 5.65876 4 7.04917 4C8.43958 4 9.56673 5.11929 9.56673 6.5Z"
-      fill="currentColor"
-    />
-  </svg>
-)
-
 export const ComboboxOption: React.FC<ReachComboboxOptionProps & {
+  renderIcon?: () => React.ReactNode
   className?: string
-}> = ({ className, children, ...props }) => (
+}> = ({ renderIcon, className, children, ...props }) => (
   <ReachComboboxOption
     {...props}
     className={classNames(
@@ -76,7 +61,9 @@ export const ComboboxOption: React.FC<ReachComboboxOptionProps & {
   >
     {children ?? (
       <>
-        <Icon className="flex-shrink-0 mr4" />
+        {renderIcon && (
+          <div className="flex flex-shrink-0 mr4">{renderIcon()}</div>
+        )}
         <div className="truncate">
           <ReachComboboxOptionText />
         </div>
diff --git a/react/components/PlaceIcon.tsx b/react/components/PlaceIcon.tsx
new file mode 100644
index 0000000..3bfcf8c
--- /dev/null
+++ b/react/components/PlaceIcon.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+export const PlaceIcon: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="16"
+    viewBox="0 0 14 16"
+    fill="none"
+  >
+    <path
+      d="M7.04917 0C3.12177 0 0 3.1 0 7C0 8.56189 0.476353 10.0562 1.42906 11.2607C1.50908 11.3782 1.60101 11.4919 1.70535 11.6007L5.19589 15.2393C5.63744 15.6996 6.21111 15.9534 6.79833 16.0006C6.97371 16.0366 7.15342 16.0328 7.31309 15.9891C7.86105 15.9204 8.39053 15.6705 8.80411 15.2393L12.2946 11.6007C12.4052 11.4855 12.5017 11.3647 12.585 11.2399C13.5268 10.039 13.9976 8.55289 13.9976 7C14.0983 3.1 10.9766 0 7.04917 0ZM9.56673 6.5C9.56673 7.88071 8.43958 9 7.04917 9C5.65876 9 4.53161 7.88071 4.53161 6.5C4.53161 5.11929 5.65876 4 7.04917 4C8.43958 4 9.56673 5.11929 9.56673 6.5Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default PlaceIcon

From 4b3edacedec71fa7d697de4d19348a6022e9537a Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 23 Jul 2020 16:50:24 -0400
Subject: [PATCH 19/32] Pass Place Icon as prop instead of render function

---
 react/LocationSearch.tsx      | 2 +-
 react/components/Combobox.tsx | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index faa8771..b043bdb 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -102,7 +102,7 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
               <ComboboxList>
                 {addresses.map((address, index) => (
                   <ComboboxOption
-                    renderIcon={() => <PlaceIcon />}
+                    icon={<PlaceIcon />}
                     value={address}
                     key={index}
                   />
diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
index b47f9b7..737d1eb 100644
--- a/react/components/Combobox.tsx
+++ b/react/components/Combobox.tsx
@@ -48,9 +48,9 @@ export const ComboboxList: React.FC<ReachComboboxListProps & {
 )
 
 export const ComboboxOption: React.FC<ReachComboboxOptionProps & {
-  renderIcon?: () => React.ReactNode
+  icon?: React.ReactNode
   className?: string
-}> = ({ renderIcon, className, children, ...props }) => (
+}> = ({ icon, className, children, ...props }) => (
   <ReachComboboxOption
     {...props}
     className={classNames(
@@ -61,9 +61,7 @@ export const ComboboxOption: React.FC<ReachComboboxOptionProps & {
   >
     {children ?? (
       <>
-        {renderIcon && (
-          <div className="flex flex-shrink-0 mr4">{renderIcon()}</div>
-        )}
+        {icon && <div className="flex flex-shrink-0 mr4">{icon}</div>}
         <div className="truncate">
           <ReachComboboxOptionText />
         </div>

From 80b59675314ba7f17b6ccb76718293e7e4ce06b7 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 23 Jul 2020 20:25:47 -0400
Subject: [PATCH 20/32] Add complexity to mocked addresses

---
 react/addresses.tsx | 1272 +++++++++----------------------------------
 1 file changed, 269 insertions(+), 1003 deletions(-)

diff --git a/react/addresses.tsx b/react/addresses.tsx
index 9598bd9..be59e90 100644
--- a/react/addresses.tsx
+++ b/react/addresses.tsx
@@ -1,1004 +1,270 @@
-export const addresses: string[] = [
-  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil itaque repellendus adipisci ex ipsum beatae iure. Tenetur ea, veritatis libero unde consectetur eaque sunt debitis soluta reiciendis non. Ad, non.',
-  'The quick brown fox jumps over the lazy dog',
-  '9 Twin Pines Point',
-  '93800 Eggendart Center',
-  '17 Warrior Drive',
-  '5400 Buhler Junction',
-  '0637 Toban Drive',
-  '368 Northfield Avenue',
-  '988 Elka Avenue',
-  '767 Banding Road',
-  '02771 Gulseth Junction',
-  '7934 Division Point',
-  '6 Susan Plaza',
-  '53176 Duke Circle',
-  '596 Farragut Alley',
-  '0180 Briar Crest Park',
-  '447 Green Ridge Way',
-  '26 Kensington Point',
-  '89 Warner Parkway',
-  '62 Bluejay Avenue',
-  '4852 Redwing Hill',
-  '41 Pankratz Parkway',
-  '37014 Bartelt Center',
-  '05 Butternut Drive',
-  '4275 Carioca Lane',
-  '292 Arkansas Hill',
-  '5 7th Junction',
-  '749 Amoth Center',
-  '836 Hoepker Plaza',
-  '982 Elmside Crossing',
-  '58 Cambridge Court',
-  '26 Buell Terrace',
-  '83 Shasta Crossing',
-  '4 Shasta Trail',
-  '48 Hauk Way',
-  '68845 Superior Point',
-  '7 Atwood Parkway',
-  '0269 South Lane',
-  '362 Upham Place',
-  '439 Manitowish Center',
-  '5677 Melody Court',
-  '08 Fairfield Junction',
-  '904 Maryland Street',
-  '94287 Dawn Avenue',
-  '84 Debs Lane',
-  '4446 Forest Court',
-  '7585 Sheridan Alley',
-  '8 Maple Alley',
-  '6 Moland Place',
-  '8589 Oxford Pass',
-  '9 Westend Place',
-  '4952 Larry Place',
-  '08199 5th Court',
-  '73855 Acker Hill',
-  '29 Mariners Cove Center',
-  '7666 Fieldstone Alley',
-  '058 Myrtle Trail',
-  '12 Lien Hill',
-  '85223 Stephen Park',
-  '905 Mayfield Parkway',
-  '553 Armistice Trail',
-  '36236 Jenna Way',
-  '497 Farragut Plaza',
-  '02770 Victoria Junction',
-  '653 Sunfield Pass',
-  '5 Continental Park',
-  '4 Bartillon Point',
-  '29435 Lake View Terrace',
-  '98 Saint Paul Plaza',
-  '21591 Superior Parkway',
-  '11327 Ridgeway Trail',
-  '35 Scoville Point',
-  '2 Anthes Crossing',
-  '335 2nd Way',
-  '842 Laurel Circle',
-  '43592 Aberg Alley',
-  '957 Montana Parkway',
-  '2739 Main Center',
-  '220 American Ash Road',
-  '55 Clove Lane',
-  '26 Ramsey Lane',
-  '36287 Fallview Center',
-  '7 Westport Place',
-  '7 Cherokee Parkway',
-  '6 Lyons Circle',
-  '2367 Lunder Street',
-  '73924 Pine View Crossing',
-  '76759 Ryan Alley',
-  '97639 Green Ridge Pass',
-  '328 Everett Circle',
-  '087 Daystar Center',
-  '50 Manitowish Center',
-  '1 Old Shore Center',
-  '601 Dovetail Junction',
-  '6 Red Cloud Pass',
-  '7 High Crossing Pass',
-  '38834 Glendale Pass',
-  '2 Petterle Drive',
-  '18 Evergreen Court',
-  '9 Kipling Street',
-  '11 Melody Park',
-  '670 Crowley Hill',
-  '193 Veith Plaza',
-  '90 Laurel Pass',
-  '3 Kropf Hill',
-  '4 Pankratz Street',
-  '76 Lakewood Gardens Hill',
-  '832 Stuart Parkway',
-  '5447 Veith Lane',
-  '3 Randy Road',
-  '2510 Erie Plaza',
-  '47015 Boyd Court',
-  '3 Columbus Avenue',
-  '9787 Meadow Vale Drive',
-  '395 Bellgrove Alley',
-  '9 Oak Place',
-  '9295 Springview Crossing',
-  '477 Hooker Pass',
-  '36725 Lien Road',
-  '10 Summer Ridge Center',
-  '936 Coolidge Alley',
-  '3 Rockefeller Plaza',
-  '9832 Holmberg Park',
-  '2 Killdeer Terrace',
-  '47113 Jackson Center',
-  '92 Dayton Hill',
-  '3 Sheridan Place',
-  '420 Mallory Court',
-  '09 Banding Hill',
-  '8 Paget Crossing',
-  '978 Carioca Pass',
-  '6 Schurz Alley',
-  '748 Cordelia Way',
-  '263 Westend Point',
-  '58280 Butterfield Avenue',
-  '918 Fisk Road',
-  '83639 Arizona Pass',
-  '027 Chive Street',
-  '574 Banding Parkway',
-  '3 Dwight Place',
-  '9320 East Avenue',
-  '8 7th Pass',
-  '215 West Drive',
-  '82211 Macpherson Place',
-  '5782 Garrison Park',
-  '133 Westend Plaza',
-  '50 Spohn Trail',
-  '30 Corscot Junction',
-  '20144 Pine View Junction',
-  '127 Dovetail Crossing',
-  '54 Hallows Court',
-  '0869 Fremont Plaza',
-  '5 Bobwhite Alley',
-  '68053 Kensington Place',
-  '3 Norway Maple Crossing',
-  '37104 Northridge Way',
-  '2 Alpine Court',
-  '4 International Parkway',
-  '04 Springs Way',
-  '762 Kennedy Alley',
-  '1 Bluejay Trail',
-  '6346 Eggendart Crossing',
-  '2572 Fulton Terrace',
-  '5062 Porter Place',
-  '099 Maple Wood Circle',
-  '4 Garrison Lane',
-  '18733 Muir Park',
-  '4679 Marcy Pass',
-  '44 Tony Park',
-  '497 Esker Court',
-  '83332 Messerschmidt Terrace',
-  '275 Chinook Plaza',
-  '0 Chinook Pass',
-  '4009 Burning Wood Crossing',
-  '275 Clyde Gallagher Lane',
-  '935 Jenna Place',
-  '7 Morning Alley',
-  '82 Glendale Hill',
-  '38 West Crossing',
-  '2 Pleasure Trail',
-  '40019 Charing Cross Point',
-  '29 Maple Wood Trail',
-  '42 Atwood Park',
-  '39124 Helena Park',
-  '7591 Larry Drive',
-  '02 Gerald Point',
-  '8 Dryden Road',
-  '11451 Delladonna Place',
-  '86813 Aberg Place',
-  '6856 Park Meadow Point',
-  '7 Eagle Crest Alley',
-  '5 Mayfield Terrace',
-  '61 Annamark Way',
-  '7 Charing Cross Drive',
-  '6589 Talmadge Place',
-  '02 Warrior Junction',
-  '708 Dixon Point',
-  '01867 Dawn Court',
-  '252 Fulton Avenue',
-  '881 Messerschmidt Hill',
-  '53951 Forest Junction',
-  '00 Gina Court',
-  '65408 Knutson Way',
-  '00315 Waxwing Point',
-  '8 Carey Center',
-  '15969 Spenser Pass',
-  '1600 Westport Plaza',
-  '50 Morning Park',
-  '5576 Moulton Lane',
-  '29344 Hallows Crossing',
-  '8032 Steensland Road',
-  '5088 Holy Cross Junction',
-  '290 Corry Parkway',
-  '1322 Del Sol Drive',
-  '150 Melvin Court',
-  '54 Birchwood Place',
-  '6751 Mendota Place',
-  '175 Talmadge Alley',
-  '871 Heath Drive',
-  '83906 Forest Run Lane',
-  '5 Corscot Trail',
-  '87215 Daystar Way',
-  '5379 Arkansas Parkway',
-  '12952 Dixon Avenue',
-  '42431 Continental Center',
-  '90859 Anniversary Center',
-  '51 Meadow Vale Pass',
-  '96905 Blackbird Hill',
-  '21 Orin Road',
-  '06805 Dawn Center',
-  '65 Monterey Hill',
-  '9581 Larry Way',
-  '95 Ridgeview Point',
-  '8 Dovetail Avenue',
-  '21307 Artisan Drive',
-  '65989 Duke Avenue',
-  '262 Lien Plaza',
-  '456 Pierstorff Trail',
-  '0 Mosinee Center',
-  '63 Manufacturers Park',
-  '54759 Veith Junction',
-  '64 Scott Junction',
-  '88118 Straubel Road',
-  '73460 Loomis Court',
-  '3419 Lien Alley',
-  '8342 Kedzie Court',
-  '4614 Burrows Point',
-  '78337 Helena Circle',
-  '99 Center Plaza',
-  '7 Myrtle Drive',
-  '6 Dryden Park',
-  '0002 Hudson Court',
-  '4409 Grayhawk Road',
-  '35573 Norway Maple Pass',
-  '82818 South Terrace',
-  '5830 Gerald Circle',
-  '57 Dexter Hill',
-  '06184 Buhler Court',
-  '8738 Artisan Crossing',
-  '8222 Ohio Alley',
-  '61121 Porter Place',
-  '380 Pawling Alley',
-  '07809 Garrison Way',
-  '70 Sherman Park',
-  '08 Anderson Trail',
-  '4 Sheridan Center',
-  '56 Holmberg Drive',
-  '724 Stephen Parkway',
-  '49 Fair Oaks Junction',
-  '30993 Dexter Crossing',
-  '79 Ridge Oak Road',
-  '181 Carpenter Park',
-  '1 Annamark Court',
-  '60 Lakewood Gardens Road',
-  '6821 Doe Crossing Avenue',
-  '93458 Northridge Road',
-  '7 Summit Trail',
-  '42 Starling Point',
-  '03734 Clemons Parkway',
-  '13091 Forest Run Crossing',
-  '472 Namekagon Hill',
-  '33303 Stone Corner Court',
-  '59 Badeau Court',
-  '8 Marcy Park',
-  '18 Rutledge Crossing',
-  '8 Pine View Alley',
-  '77606 Raven Plaza',
-  '43324 Pierstorff Hill',
-  '691 Northport Lane',
-  '7 Hauk Way',
-  '40 Buena Vista Crossing',
-  '721 Jackson Way',
-  '89 Valley Edge Avenue',
-  '53997 Trailsway Drive',
-  '70 Stephen Parkway',
-  '274 Coleman Park',
-  '471 Mendota Hill',
-  '12 Coolidge Pass',
-  '95091 School Center',
-  '11275 Mayer Point',
-  '44804 Fallview Way',
-  '73 Donald Crossing',
-  '299 Bunker Hill Center',
-  '30 Mccormick Terrace',
-  '334 Loeprich Circle',
-  '25 Linden Street',
-  '698 Gateway Parkway',
-  '85783 Stone Corner Court',
-  '4117 Dahle Crossing',
-  '31 Fuller Junction',
-  '8 Bashford Trail',
-  '893 Hermina Plaza',
-  '60 Claremont Hill',
-  '179 Eastwood Center',
-  '64 Derek Park',
-  '4334 Bluestem Circle',
-  '45 Armistice Court',
-  '23 Northport Junction',
-  '313 Elgar Street',
-  '531 Hazelcrest Plaza',
-  '31659 Linden Drive',
-  '25792 Towne Pass',
-  '541 Green Ridge Way',
-  '7 Esker Pass',
-  '7 Sloan Alley',
-  '6881 Westridge Plaza',
-  '5 Hanson Plaza',
-  '5387 Thierer Alley',
-  '123 Acker Center',
-  '26653 Killdeer Crossing',
-  '57 Iowa Park',
-  '9 Comanche Drive',
-  '0457 Bashford Road',
-  '9 Grayhawk Alley',
-  '19398 Hanson Pass',
-  '394 1st Terrace',
-  '630 Gina Crossing',
-  '9 Jay Plaza',
-  '3388 Moose Parkway',
-  '562 Morning Park',
-  '07205 Hauk Center',
-  '049 Morrow Alley',
-  '56 Garrison Crossing',
-  '5 Steensland Junction',
-  '5 Hanson Trail',
-  '82025 Eastwood Parkway',
-  '33728 Anhalt Point',
-  '34532 Mallard Trail',
-  '7708 Maple Wood Lane',
-  '33657 Hoepker Circle',
-  '28 Moulton Point',
-  '68 Kenwood Lane',
-  '189 Portage Lane',
-  '59094 Bluestem Street',
-  '17791 Randy Junction',
-  '500 Leroy Center',
-  '05 Stephen Avenue',
-  '56956 Morning Alley',
-  '4202 Morningstar Hill',
-  '6786 Pine View Avenue',
-  '9 Union Street',
-  '381 Laurel Pass',
-  '958 Mallory Crossing',
-  '5713 Shelley Crossing',
-  '5 Hanson Street',
-  '05 Swallow Crossing',
-  '63053 Crownhardt Avenue',
-  '04288 Manufacturers Hill',
-  '43 Nobel Place',
-  '620 Melvin Drive',
-  '56750 Nancy Place',
-  '54920 Marcy Alley',
-  '9 Haas Road',
-  '2544 Namekagon Alley',
-  '38 Parkside Plaza',
-  '6 Victoria Avenue',
-  '630 Lyons Road',
-  '80 Roth Center',
-  '05668 Grim Parkway',
-  '3 Hanover Way',
-  '46263 Old Shore Trail',
-  '59217 Green Ridge Avenue',
-  '9 Forest Dale Hill',
-  '709 Michigan Point',
-  '1757 Little Fleur Junction',
-  '5 Autumn Leaf Road',
-  '9 Acker Hill',
-  '624 Carpenter Crossing',
-  '55762 Anthes Pass',
-  '16 Grim Place',
-  '21637 Steensland Way',
-  '56000 Michigan Alley',
-  '867 Arrowood Court',
-  '926 Esch Way',
-  '287 Judy Circle',
-  '6 Erie Junction',
-  '690 David Trail',
-  '42027 Grim Plaza',
-  '69911 Hallows Circle',
-  '29 Sunnyside Junction',
-  '649 Marcy Place',
-  '1662 Onsgard Trail',
-  '8164 Truax Court',
-  '625 Service Junction',
-  '9477 American Pass',
-  '79714 Morning Avenue',
-  '71545 Maple Wood Way',
-  '7 American Ash Avenue',
-  '392 Kingsford Street',
-  '9037 Sundown Lane',
-  '2767 Melody Circle',
-  '0381 Upham Crossing',
-  '3 Morrow Park',
-  '3812 Nevada Plaza',
-  '279 Cordelia Court',
-  '46 Morningstar Street',
-  '68 Browning Junction',
-  '4010 Stoughton Court',
-  '5498 Northwestern Hill',
-  '4581 Saint Paul Pass',
-  '7 Susan Point',
-  '72 Buell Circle',
-  '86 Surrey Center',
-  '2 Arapahoe Junction',
-  '7 Novick Park',
-  '2827 Debs Way',
-  '635 Pepper Wood Center',
-  '23 Farragut Road',
-  '65 Eastlawn Junction',
-  '7035 Muir Pass',
-  '0206 Bayside Drive',
-  '87 Lakewood Gardens Circle',
-  '542 Cascade Lane',
-  '78 Londonderry Street',
-  '4479 Declaration Crossing',
-  '1 Rowland Lane',
-  '89 Huxley Trail',
-  '9968 Monument Park',
-  '4376 Truax Park',
-  '0 Bartelt Terrace',
-  '59773 Leroy Point',
-  '14519 Springview Park',
-  '5239 Packers Trail',
-  '2 Magdeline Circle',
-  '819 John Wall Junction',
-  '7 Forest Dale Parkway',
-  '528 6th Junction',
-  '74 Jenna Center',
-  '379 Hauk Terrace',
-  '4095 Texas Court',
-  '561 Rutledge Road',
-  '456 Scott Point',
-  '15 Messerschmidt Circle',
-  '07966 Doe Crossing Street',
-  '5117 Bowman Avenue',
-  '52 Gina Center',
-  '4464 Clemons Alley',
-  '4453 Leroy Hill',
-  '245 Knutson Alley',
-  '74875 Hauk Drive',
-  '5110 Everett Road',
-  '8 Hansons Lane',
-  '69832 Bonner Park',
-  '507 Myrtle Crossing',
-  '1 Morrow Circle',
-  '833 Maywood Junction',
-  '3578 Prentice Junction',
-  '724 Golf Course Court',
-  '3 Nevada Avenue',
-  '25066 Porter Alley',
-  '466 Steensland Point',
-  '1 Harbort Place',
-  '05828 School Avenue',
-  '05462 Sunfield Junction',
-  '56 Walton Junction',
-  '1 Dayton Avenue',
-  '02335 Golf Terrace',
-  '2 Holy Cross Junction',
-  '0 Bunker Hill Junction',
-  '802 Lukken Place',
-  '0989 Morrow Alley',
-  '75178 Pearson Pass',
-  '99352 Sycamore Drive',
-  '485 Sunfield Circle',
-  '63 North Place',
-  '19326 Clemons Lane',
-  '4 Ohio Terrace',
-  '0115 Westend Place',
-  '6308 Hoepker Circle',
-  '6935 Continental Terrace',
-  '6 Scofield Pass',
-  '27 Southridge Court',
-  '57 Corben Point',
-  '32102 Harper Junction',
-  '65396 Starling Place',
-  '8290 Crownhardt Crossing',
-  '6493 Cordelia Crossing',
-  '9 Dawn Street',
-  '62 Emmet Circle',
-  '30 Village Park',
-  '8 Kenwood Place',
-  '769 Springview Crossing',
-  '55 Northport Hill',
-  '81992 Buell Circle',
-  '8580 Fairview Crossing',
-  '48 Sauthoff Court',
-  '7102 Oak Valley Park',
-  '6 Sheridan Crossing',
-  '8 Sutherland Pass',
-  '336 Packers Way',
-  '4890 Norway Maple Center',
-  '8005 Portage Road',
-  '98522 Golf View Parkway',
-  '904 Myrtle Hill',
-  '90304 Barby Park',
-  '130 Kipling Trail',
-  '695 Menomonie Way',
-  '299 Reindahl Park',
-  '389 Norway Maple Lane',
-  '402 Sutteridge Park',
-  '976 Stoughton Trail',
-  '100 Golden Leaf Street',
-  '9199 Debra Pass',
-  '4366 Moulton Avenue',
-  '4 Corry Street',
-  '4 Stephen Way',
-  '99739 Florence Parkway',
-  '897 Coleman Parkway',
-  '3987 Southridge Park',
-  '34 Novick Junction',
-  '5 Bunker Hill Hill',
-  '0729 Lotheville Plaza',
-  '5014 Larry Plaza',
-  '7 Merrick Trail',
-  '7449 Thompson Crossing',
-  '36 Northfield Street',
-  '901 Dahle Point',
-  '4 Boyd Trail',
-  '4348 Clyde Gallagher Place',
-  '9 Manley Court',
-  '2343 Mariners Cove Parkway',
-  '81397 Graceland Circle',
-  '7 Oakridge Terrace',
-  '9407 Fulton Street',
-  '7095 Petterle Park',
-  '09537 Mcguire Drive',
-  '21672 Swallow Circle',
-  '7808 Schmedeman Center',
-  '2 Monterey Parkway',
-  '31259 Judy Trail',
-  '5 Anhalt Street',
-  '745 Talmadge Circle',
-  '230 Troy Street',
-  '988 John Wall Junction',
-  '5 Blue Bill Park Way',
-  '366 Schurz Center',
-  '6342 Grim Lane',
-  '21821 Tony Avenue',
-  '6270 Grasskamp Junction',
-  '2 Scoville Avenue',
-  '054 Independence Road',
-  '88 Mallard Drive',
-  '63898 Veith Lane',
-  '33946 Gateway Trail',
-  '2922 Larry Circle',
-  '186 Utah Lane',
-  '969 Buell Court',
-  '1 Corben Trail',
-  '3 Park Meadow Crossing',
-  '05 Canary Place',
-  '8 Susan Avenue',
-  '8782 Aberg Drive',
-  '1996 Texas Court',
-  '250 Summer Ridge Road',
-  '6702 Haas Drive',
-  '997 Weeping Birch Place',
-  '39 Messerschmidt Place',
-  '14375 Kennedy Street',
-  '895 Bellgrove Crossing',
-  '24240 Rockefeller Pass',
-  '3 Service Hill',
-  '9736 Merchant Place',
-  '7 David Parkway',
-  '8 Hallows Hill',
-  '629 Westport Plaza',
-  '90 Delladonna Court',
-  '2061 Susan Junction',
-  '5 Reindahl Point',
-  '8 Arizona Pass',
-  '8975 Mcguire Pass',
-  '76 Maywood Parkway',
-  '301 Little Fleur Park',
-  '165 Mallory Crossing',
-  '9361 Helena Hill',
-  '7 Lukken Center',
-  '73 Gateway Plaza',
-  '03 Ohio Park',
-  '77 Merchant Lane',
-  '71239 Elmside Point',
-  '53 Troy Road',
-  '4 Pennsylvania Park',
-  '024 Division Place',
-  '312 Dapin Park',
-  '20641 Waubesa Court',
-  '631 Longview Way',
-  '2382 Canary Junction',
-  '2 Ridgeway Way',
-  '6 Oriole Point',
-  '37 Springs Plaza',
-  '93518 Calypso Court',
-  '9073 Mayer Hill',
-  '2 Lunder Point',
-  '92 Kinsman Junction',
-  '1 Northland Center',
-  '5 Mendota Avenue',
-  '8419 Sutherland Plaza',
-  '43670 Sachtjen Center',
-  '2 Surrey Center',
-  '8492 South Road',
-  '19117 Del Mar Point',
-  '310 Derek Court',
-  '143 Esker Way',
-  '85593 Hanson Center',
-  '70372 Elmside Trail',
-  '41704 Larry Circle',
-  '7 Milwaukee Drive',
-  '480 Jay Point',
-  '301 Weeping Birch Circle',
-  '006 Messerschmidt Crossing',
-  '61318 Muir Avenue',
-  '585 Dryden Hill',
-  '1 Dryden Circle',
-  '84435 Knutson Pass',
-  '68941 Springview Park',
-  '29 Glendale Circle',
-  '63516 Columbus Road',
-  '866 Anthes Road',
-  '39271 Pleasure Circle',
-  '86 West Drive',
-  '45933 Drewry Center',
-  '190 Eagle Crest Court',
-  '5457 Hanson Hill',
-  '31054 Bayside Junction',
-  '0 Debra Center',
-  '71081 Orin Parkway',
-  '4 Judy Drive',
-  '4607 Meadow Ridge Road',
-  '995 Northport Avenue',
-  '35383 Comanche Circle',
-  '82847 Monica Plaza',
-  '9 Alpine Point',
-  '2 Bobwhite Hill',
-  '915 Leroy Terrace',
-  '7 New Castle Street',
-  '7 Stang Center',
-  '71483 Dorton Center',
-  '1206 Drewry Crossing',
-  '59 Anderson Road',
-  '96043 Kensington Junction',
-  '06 Ridgeview Court',
-  '56541 Bartelt Street',
-  '476 Lukken Court',
-  '4926 Havey Point',
-  '269 Kensington Alley',
-  '23 Helena Alley',
-  '365 Havey Drive',
-  '57 Nobel Trail',
-  '82067 Carey Drive',
-  '50088 Ridgeway Road',
-  '6077 Lien Circle',
-  '789 Pepper Wood Plaza',
-  '4601 Glendale Alley',
-  '691 Birchwood Hill',
-  '2882 Esch Terrace',
-  '4415 Springs Way',
-  '415 Scott Way',
-  '23673 Monica Point',
-  '3031 Transport Lane',
-  '6364 Macpherson Plaza',
-  '66587 South Terrace',
-  '6 Elka Place',
-  '0 Holy Cross Road',
-  '1586 Kropf Park',
-  '689 Mendota Park',
-  '6 Haas Place',
-  '369 Summerview Lane',
-  '80220 Farmco Court',
-  '4 Surrey Street',
-  '881 Pearson Park',
-  '20037 Independence Crossing',
-  '6 Fair Oaks Drive',
-  '57 Birchwood Plaza',
-  '72 Hanson Road',
-  '1 Dapin Street',
-  '37 Mccormick Drive',
-  '6 Harper Trail',
-  '61 Goodland Junction',
-  '8 Pond Center',
-  '37029 Scott Way',
-  '70720 Judy Park',
-  '48 La Follette Drive',
-  '24 Prairieview Center',
-  '7 Moland Drive',
-  '85170 Surrey Point',
-  '75266 Northridge Street',
-  '57 Barnett Way',
-  '70029 Loftsgordon Pass',
-  '9 Lunder Crossing',
-  '4 Eastlawn Center',
-  '69 High Crossing Street',
-  '2 Eggendart Park',
-  '335 Shoshone Junction',
-  '98 Roth Drive',
-  '39182 Rockefeller Center',
-  '821 Shoshone Plaza',
-  '3820 Jenna Road',
-  '71043 Walton Court',
-  '671 Maryland Circle',
-  '410 Farragut Terrace',
-  '4895 Mifflin Way',
-  '1342 Roxbury Drive',
-  '43338 Farwell Alley',
-  '5748 Fisk Court',
-  '8764 Fuller Park',
-  '2 Johnson Junction',
-  '9 Pond Hill',
-  '46 Grim Lane',
-  '3665 Schurz Center',
-  '53 South Lane',
-  '9 Canary Terrace',
-  '471 Crowley Crossing',
-  '47165 Acker Road',
-  '57024 Mccormick Park',
-  '187 Melby Court',
-  '7 Sachs Parkway',
-  '9059 Mallard Parkway',
-  '6659 Walton Street',
-  '9 Pine View Lane',
-  '4659 Del Mar Plaza',
-  '2 Mandrake Place',
-  '977 Sullivan Way',
-  '16 Dexter Circle',
-  '80 Mesta Point',
-  '7035 Fairfield Point',
-  '3 Hauk Junction',
-  '04436 Scoville Center',
-  '7 Erie Place',
-  '8269 Summit Plaza',
-  '38002 Eagle Crest Crossing',
-  '27 Orin Crossing',
-  '2 Merry Crossing',
-  '864 Hanson Lane',
-  '7 Algoma Point',
-  '10 Sommers Crossing',
-  '6 Pond Avenue',
-  '1544 Westport Lane',
-  '7 Meadow Valley Crossing',
-  '485 Mitchell Terrace',
-  '4 Loftsgordon Trail',
-  '31 Shopko Road',
-  '09462 Victoria Crossing',
-  '593 Elmside Pass',
-  '8 Lake View Terrace',
-  '72 American Drive',
-  '7613 Sage Alley',
-  '4 Grasskamp Point',
-  '3864 Mallard Avenue',
-  '48 Crownhardt Circle',
-  '986 Sugar Circle',
-  '9434 Riverside Court',
-  '4640 Pankratz Alley',
-  '482 Lukken Trail',
-  '26 Donald Plaza',
-  '30705 Superior Road',
-  '39 Burrows Avenue',
-  '8 Hanover Alley',
-  '37510 Birchwood Lane',
-  '4 Burrows Court',
-  '73240 Kingsford Center',
-  '1 Forest Park',
-  '90 Sauthoff Crossing',
-  '866 Westerfield Circle',
-  '27 Express Trail',
-  '1 Ohio Crossing',
-  '885 Texas Parkway',
-  '46 Park Meadow Way',
-  '1 Paget Park',
-  '863 Garrison Road',
-  '33757 Lindbergh Street',
-  '4 Sachtjen Junction',
-  '6625 Bay Park',
-  '324 6th Terrace',
-  '13233 Harbort Plaza',
-  '00 Elmside Drive',
-  '114 Spohn Drive',
-  '1186 Welch Circle',
-  '01 Hoffman Plaza',
-  '95 Gateway Road',
-  '666 La Follette Junction',
-  '20434 Hazelcrest Way',
-  '189 Nelson Junction',
-  '78 Luster Place',
-  '2837 Fairview Crossing',
-  '051 Holmberg Parkway',
-  '196 Dorton Terrace',
-  '9591 Mosinee Place',
-  '6 1st Road',
-  '35894 Lindbergh Park',
-  '28049 Magdeline Pass',
-  '5 West Junction',
-  '8 Bobwhite Parkway',
-  '019 Everett Junction',
-  '30624 Nova Pass',
-  '15 Russell Way',
-  '37601 Forest Way',
-  '543 Bunting Point',
-  '8724 Blaine Crossing',
-  '540 Manley Junction',
-  '2 Nobel Parkway',
-  '3 Leroy Center',
-  '42 Anzinger Way',
-  '74142 Cardinal Court',
-  '3 Forest Dale Point',
-  '006 New Castle Trail',
-  '51 Barnett Junction',
-  '147 Grover Alley',
-  '5 Eagan Junction',
-  '236 Everett Crossing',
-  '8152 Moulton Pass',
-  '45 Vera Terrace',
-  '439 Crowley Way',
-  '82 Declaration Point',
-  '2035 Division Center',
-  '84405 Swallow Drive',
-  '2 Boyd Circle',
-  '34 Spohn Center',
-  '8537 Lukken Trail',
-  '0634 Stuart Lane',
-  '54950 Old Gate Way',
-  '0 Iowa Parkway',
-  '17007 Gulseth Terrace',
-  '47830 Center Street',
-  '9 Grover Point',
-  '1 Park Meadow Junction',
-  '6 Thackeray Hill',
-  '5956 Namekagon Road',
-  '8 Clemons Court',
-  '741 Burrows Place',
-  '781 Sycamore Parkway',
-  '384 Eliot Place',
-  '46 Eastwood Pass',
-  '29 Mandrake Alley',
-  '3 Monument Plaza',
-  '98 Summerview Place',
-  '4513 Westport Pass',
-  '47 Hoard Avenue',
-  '70851 Dayton Hill',
-  '747 Kenwood Drive',
-  '14 Oakridge Road',
-  '478 Atwood Parkway',
-  '9306 Forest Street',
-  '60900 Towne Road',
-  '8 Hayes Way',
-  '7317 Merchant Trail',
-  '4 Fisk Circle',
-  '655 Vermont Plaza',
-  '356 Tennyson Avenue',
-  '52379 New Castle Place',
-  '16263 Riverside Street',
-  '26 Darwin Avenue',
-  '3 Grim Circle',
-  '445 Main Trail',
-  '5877 Lien Lane',
-  '44523 Onsgard Circle',
-  '97 Mayer Alley',
-  '06 Blaine Street',
-  '84 Northridge Lane',
-  '1 Towne Street',
-  '470 Village Green Circle',
-  '8 Washington Way',
-  '50 Hoard Trail',
-  '6 Eliot Lane',
-  '23 Mccormick Point',
-  '3463 Trailsway Road',
-  '5 Westerfield Way',
-  '18532 Paget Alley',
-  '3 Crowley Plaza',
-  '037 Almo Drive',
-  '55402 Gerald Court',
-  '334 Mcguire Park',
-  '04477 Warbler Circle',
-  '5284 Almo Junction',
-  '31729 Heath Park',
-  '25 Rusk Crossing',
-  '4 Bashford Drive',
-  '538 Hanover Crossing',
-  '967 Ludington Road',
-  '74 Truax Center',
-  '877 Mayfield Road',
-  '93291 American Ash Circle',
-  '4 Old Gate Plaza',
-  '31 Rieder Hill',
-  '699 Mosinee Terrace',
-  '7 Esch Drive',
-  '40 Karstens Drive',
-  '4750 Roth Avenue',
-  '634 Eliot Point',
-  '54888 7th Point',
-  '93 Del Sol Terrace',
-  '5606 Main Crossing',
-  '8137 Pankratz Pass',
-  '774 Rieder Trail',
-  '0532 Orin Trail',
-  '4 Forest Run Plaza',
-  '32347 Packers Center',
-  '84308 Burning Wood Circle',
-  '1 Namekagon Point',
-  '20 Union Court',
-  '15190 Eggendart Drive',
-  '24985 Mccormick Hill',
-  '4 Sauthoff Court',
-  '4326 Maryland Circle',
-  '35 Annamark Park',
-  '1703 Oakridge Parkway',
-  '24683 Mayfield Drive',
-  '98584 Crescent Oaks Lane',
-  '581 Rusk Trail',
-  '64686 Continental Road',
-  '9 Grayhawk Crossing',
-  '00 Reinke Way',
-  '114 Stang Way',
-  '433 Pleasure Court',
-  '148 Vidon Place',
-  '987 Troy Drive',
-  '1 Gale Alley',
-  '069 Spenser Junction',
-  '44 Atwood Alley',
-  '4 Marcy Pass',
-  '6541 Westridge Hill',
-  '7 Dahle Terrace',
-  '40 Talisman Alley',
-  '38788 Cherokee Lane',
-  '5 Sauthoff Lane',
-  '719 Holmberg Drive',
-  '9846 Roth Alley',
-  '0088 Artisan Street',
-  '14163 Center Junction',
-  '0 Sunnyside Pass',
-  '7 Shelley Park',
-  '6 Straubel Court',
-  '102 Russell Street',
-  '291 Crest Line Road',
-  '17 Vernon Terrace',
-  '017 Ridge Oak Point',
-  '9783 Jenna Alley',
-  '043 Schiller Circle',
-  '4103 Holy Cross Avenue',
-  '7186 Rutledge Alley',
-  '1 American Ash Parkway',
-  '58865 American Way',
-  '390 4th Way',
-  '582 Artisan Circle',
-  '6 Acker Alley',
-  '04699 Pearson Road',
-  '338 Judy Crossing',
-  '76097 Homewood Pass',
-  '1 Londonderry Point',
-  '5313 Esker Center',
-  '78 Hoepker Avenue',
-  '4750 Heath Pass',
-  '91 Elka Point',
-  '22003 Pond Terrace',
-  '7822 Blaine Lane',
-  '2782 Hanover Trail',
-  '89 Riverside Drive',
-  '4090 Oakridge Place',
-  '407 Artisan Junction',
-  '3607 Mariners Cove Road',
-  '19 Mcguire Avenue',
-  '3135 Golf Course Place',
-  '46 Mcbride Way',
-  '1 Mccormick Road',
-  '182 Arkansas Avenue',
-  '5 1st Street',
-  '7 Goodland Terrace',
-  '12 7th Lane',
-  '1051 Bowman Parkway',
-  '4598 Armistice Avenue',
-  '2 Columbus Court',
-  '39131 Dunning Parkway',
-  '570 Truax Drive',
-  '8013 Schiller Court',
-  '251 John Wall Junction',
-  '60 Sunfield Lane',
-  '0039 Killdeer Trail',
-  '867 Cody Plaza',
-  '63 Westerfield Trail',
-  '90648 Rowland Alley',
-  '64368 Novick Road',
-  '18 Carioca Plaza',
-  '136 Daystar Hill',
-  '988 Oriole Street',
+export interface Location {
+  street: string
+  city: string
+  state: string
+}
+
+export const locations: Location[] = [
+  { street: 'Grasskamp', city: 'Lancaster', state: 'Pennsylvania' },
+  { street: 'Darwin', city: 'Valley Forge', state: 'Pennsylvania' },
+  { street: 'Dayton', city: 'Glendale', state: 'California' },
+  { street: 'Anzinger', city: 'Tuscaloosa', state: 'Alabama' },
+  { street: 'Blackbird', city: 'Lubbock', state: 'Texas' },
+  { street: 'Golden Leaf', city: 'Salem', state: 'Oregon' },
+  { street: 'Longview', city: 'Greeley', state: 'Colorado' },
+  { street: 'Elka', city: 'Houston', state: 'Texas' },
+  { street: 'Fremont', city: 'Salinas', state: 'California' },
+  { street: 'Del Mar', city: 'Austin', state: 'Texas' },
+  { street: 'Heffernan', city: 'Naples', state: 'Florida' },
+  { street: 'Vidon', city: 'Shreveport', state: 'Louisiana' },
+  { street: 'Gale', city: 'Colorado Springs', state: 'Colorado' },
+  { street: 'Hanson', city: 'Macon', state: 'Georgia' },
+  { street: 'Hermina', city: 'Sacramento', state: 'California' },
+  { street: 'Saint Paul', city: 'New York City', state: 'New York' },
+  { street: 'Vermont', city: 'Springfield', state: 'Illinois' },
+  { street: 'Weeping Birch', city: 'Pueblo', state: 'Colorado' },
+  { street: 'Artisan', city: 'Worcester', state: 'Massachusetts' },
+  { street: 'Hovde', city: 'Sacramento', state: 'California' },
+  { street: 'Crownhardt', city: 'New York City', state: 'New York' },
+  { street: 'Dakota', city: 'Minneapolis', state: 'Minnesota' },
+  { street: 'Trailsway', city: 'Laredo', state: 'Texas' },
+  { street: 'Artisan', city: 'Juneau', state: 'Alaska' },
+  { street: 'Florence', city: 'Henderson', state: 'Nevada' },
+  { street: 'Northport', city: 'Philadelphia', state: 'Pennsylvania' },
+  { street: 'Weeping Birch', city: 'Evansville', state: 'Indiana' },
+  { street: 'Daystar', city: 'Winston Salem', state: 'North Carolina' },
+  { street: 'Larry', city: 'Miami Beach', state: 'Florida' },
+  { street: 'Spohn', city: 'Kansas City', state: 'Kansas' },
+  {
+    street: 'Westerfield',
+    city: 'Washington',
+    state: 'District of Columbia',
+  },
+  { street: 'Farwell', city: 'San Diego', state: 'California' },
+  { street: 'La Follette', city: 'Dallas', state: 'Texas' },
+  { street: 'Parkside', city: 'Memphis', state: 'Tennessee' },
+  { street: 'Mitchell', city: 'Philadelphia', state: 'Pennsylvania' },
+  { street: 'Ridge Oak', city: 'Charlotte', state: 'North Carolina' },
+  { street: 'Myrtle', city: 'Odessa', state: 'Texas' },
+  { street: 'Forest Run', city: 'Valdosta', state: 'Georgia' },
+  { street: 'Grover', city: 'Dulles', state: 'Virginia' },
+  { street: 'Fulton', city: 'Columbus', state: 'Ohio' },
+  { street: 'Mallard', city: 'Charleston', state: 'West Virginia' },
+  { street: 'Corben', city: 'Wichita', state: 'Kansas' },
+  { street: 'Maple', city: 'Houston', state: 'Texas' },
+  { street: 'Center', city: 'Mobile', state: 'Alabama' },
+  { street: 'Elgar', city: 'Charlotte', state: 'North Carolina' },
+  { street: 'Oriole', city: 'Clearwater', state: 'Florida' },
+  { street: 'Melrose', city: 'Saint Louis', state: 'Missouri' },
+  { street: 'Independence', city: 'Fort Worth', state: 'Texas' },
+  { street: 'Welch', city: 'Syracuse', state: 'New York' },
+  { street: 'Badeau', city: 'San Antonio', state: 'Texas' },
+  { street: 'Randy', city: 'Corpus Christi', state: 'Texas' },
+  { street: 'Roth', city: 'Portland', state: 'Oregon' },
+  { street: 'Macpherson', city: 'Asheville', state: 'North Carolina' },
+  { street: 'Burrows', city: 'Minneapolis', state: 'Minnesota' },
+  { street: 'Stoughton', city: 'Minneapolis', state: 'Minnesota' },
+  { street: 'Hazelcrest', city: 'Fresno', state: 'California' },
+  { street: 'Bellgrove', city: 'Honolulu', state: 'Hawaii' },
+  { street: 'Dakota', city: 'Miami', state: 'Florida' },
+  { street: 'Dapin', city: 'Pittsburgh', state: 'Pennsylvania' },
+  { street: 'Westport', city: 'Boise', state: 'Idaho' },
+  { street: 'Lotheville', city: 'Erie', state: 'Pennsylvania' },
+  { street: 'Kings', city: 'Atlanta', state: 'Georgia' },
+  { street: 'Miller', city: 'Schenectady', state: 'New York' },
+  { street: '8th', city: 'Charleston', state: 'West Virginia' },
+  { street: 'Florence', city: 'Houston', state: 'Texas' },
+  { street: 'Cascade', city: 'Vancouver', state: 'Washington' },
+  { street: 'Stuart', city: 'Roanoke', state: 'Virginia' },
+  { street: 'Golden Leaf', city: 'Portland', state: 'Oregon' },
+  { street: 'Green', city: 'Trenton', state: 'New Jersey' },
+  { street: 'Rutledge', city: 'Dallas', state: 'Texas' },
+  { street: 'Westridge', city: 'Dallas', state: 'Texas' },
+  { street: 'Glacier Hill', city: 'Lehigh Acres', state: 'Florida' },
+  { street: 'East', city: 'Watertown', state: 'Massachusetts' },
+  { street: 'Manitowish', city: 'Honolulu', state: 'Hawaii' },
+  { street: 'Rusk', city: 'New Orleans', state: 'Louisiana' },
+  { street: 'Graceland', city: 'Spring Hill', state: 'Florida' },
+  { street: 'Schiller', city: 'Phoenix', state: 'Arizona' },
+  { street: 'Vidon', city: 'El Paso', state: 'Texas' },
+  { street: 'Marcy', city: 'Los Angeles', state: 'California' },
+  { street: 'Commercial', city: 'New Orleans', state: 'Louisiana' },
+  { street: 'Clove', city: 'San Francisco', state: 'California' },
+  { street: 'Schiller', city: 'Salt Lake City', state: 'Utah' },
+  { street: 'Fulton', city: 'Tacoma', state: 'Washington' },
+  { street: 'Bunting', city: 'Birmingham', state: 'Alabama' },
+  { street: 'Spenser', city: 'Minneapolis', state: 'Minnesota' },
+  { street: 'Green Ridge', city: 'Dallas', state: 'Texas' },
+  { street: 'Jay', city: 'Fort Pierce', state: 'Florida' },
+  { street: 'Kedzie', city: 'Baton Rouge', state: 'Louisiana' },
+  { street: 'Pennsylvania', city: 'Terre Haute', state: 'Indiana' },
+  { street: 'Fremont', city: 'Salem', state: 'Oregon' },
+  { street: 'Linden', city: 'Houston', state: 'Texas' },
+  { street: 'Rockefeller', city: 'Hartford', state: 'Connecticut' },
+  { street: 'Dovetail', city: 'Bloomington', state: 'Indiana' },
+  { street: 'La Follette', city: 'Simi Valley', state: 'California' },
+  { street: 'Mandrake', city: 'Bethesda', state: 'Maryland' },
+  { street: 'Artisan', city: 'Tulsa', state: 'Oklahoma' },
+  { street: 'Towne', city: 'Tucson', state: 'Arizona' },
+  { street: 'Burrows', city: 'Milwaukee', state: 'Wisconsin' },
+  { street: 'Mitchell', city: 'Fullerton', state: 'California' },
+  { street: 'Northview', city: 'Brooklyn', state: 'New York' },
+  { street: 'Fremont', city: 'Springfield', state: 'Illinois' },
+  {
+    street: 'Wayridge',
+    city: 'Washington',
+    state: 'District of Columbia',
+  },
+  { street: 'Atwood', city: 'Las Vegas', state: 'Nevada' },
+  { street: 'Debra', city: 'Oxnard', state: 'California' },
+  { street: 'Blaine', city: 'Saint Louis', state: 'Missouri' },
+  { street: 'Prairieview', city: 'Sacramento', state: 'California' },
+  { street: 'Anniversary', city: 'Cincinnati', state: 'Ohio' },
+  { street: 'Continental', city: 'Rochester', state: 'New York' },
+  { street: 'Tennyson', city: 'Abilene', state: 'Texas' },
+  { street: 'Columbus', city: 'Norwalk', state: 'Connecticut' },
+  { street: 'Heath', city: 'Hartford', state: 'Connecticut' },
+  { street: 'Memorial', city: 'Spring Hill', state: 'Florida' },
+  { street: 'Randy', city: 'Newton', state: 'Massachusetts' },
+  { street: 'Arizona', city: 'San Jose', state: 'California' },
+  { street: 'Veith', city: 'El Paso', state: 'Texas' },
+  { street: 'Londonderry', city: 'Dallas', state: 'Texas' },
+  { street: 'Veith', city: 'Killeen', state: 'Texas' },
+  { street: 'Clemons', city: 'Pasadena', state: 'California' },
+  { street: 'Bluestem', city: 'Newark', state: 'Delaware' },
+  { street: 'Anhalt', city: 'Dayton', state: 'Ohio' },
+  { street: 'Westridge', city: 'Louisville', state: 'Kentucky' },
+  { street: 'Shasta', city: 'Orange', state: 'California' },
+  { street: 'Memorial', city: 'Independence', state: 'Missouri' },
+  { street: 'Hauk', city: 'Columbus', state: 'Ohio' },
+  { street: 'Evergreen', city: 'Indianapolis', state: 'Indiana' },
+  { street: 'Tennyson', city: 'Houston', state: 'Texas' },
+  { street: 'Washington', city: 'Albuquerque', state: 'New Mexico' },
+  { street: 'Wayridge', city: 'Anchorage', state: 'Alaska' },
+  { street: 'Blackbird', city: 'Charlotte', state: 'North Carolina' },
+  { street: 'Steensland', city: 'Dallas', state: 'Texas' },
+  { street: 'Oxford', city: 'Denton', state: 'Texas' },
+  { street: 'Bunting', city: 'El Paso', state: 'Texas' },
+  { street: 'Kenwood', city: 'Gainesville', state: 'Florida' },
+  { street: 'Eggendart', city: 'Merrifield', state: 'Virginia' },
+  { street: 'Gale', city: 'Pittsburgh', state: 'Pennsylvania' },
+  { street: 'Dovetail', city: 'Fresno', state: 'California' },
+  { street: 'Jana', city: 'Plano', state: 'Texas' },
+  { street: 'Utah', city: 'El Paso', state: 'Texas' },
+  { street: 'Sloan', city: 'Raleigh', state: 'North Carolina' },
+  { street: 'Saint Paul', city: 'Saint Paul', state: 'Minnesota' },
+  { street: 'Hagan', city: 'Omaha', state: 'Nebraska' },
+  { street: 'Haas', city: 'Chicago', state: 'Illinois' },
+  { street: 'Dawn', city: 'Charleston', state: 'West Virginia' },
+  { street: 'Butterfield', city: 'Springfield', state: 'Virginia' },
+  { street: 'Anthes', city: 'Amarillo', state: 'Texas' },
+  { street: 'Pawling', city: 'Saint Louis', state: 'Missouri' },
+  { street: 'Corry', city: 'Chicago', state: 'Illinois' },
+  { street: 'Clarendon', city: 'Chula Vista', state: 'California' },
+  { street: 'Schurz', city: 'Minneapolis', state: 'Minnesota' },
+  { street: 'American', city: 'Phoenix', state: 'Arizona' },
+  { street: 'Iowa', city: 'Amarillo', state: 'Texas' },
+  { street: 'Helena', city: 'Lexington', state: 'Kentucky' },
+  { street: 'Butterfield', city: 'Beaverton', state: 'Oregon' },
+  { street: 'Drewry', city: 'Des Moines', state: 'Iowa' },
+  { street: 'Nancy', city: 'San Diego', state: 'California' },
+  { street: 'Hudson', city: 'San Jose', state: 'California' },
+  { street: 'Hagan', city: 'Nashville', state: 'Tennessee' },
+  { street: 'Kipling', city: 'Atlanta', state: 'Georgia' },
+  { street: 'Hoffman', city: 'Apache Junction', state: 'Arizona' },
+  { street: 'Schlimgen', city: 'Mc Keesport', state: 'Pennsylvania' },
+  { street: 'Valley Edge', city: 'Tampa', state: 'Florida' },
+  { street: 'Cottonwood', city: 'Houston', state: 'Texas' },
+  { street: 'Moulton', city: 'Akron', state: 'Ohio' },
+  { street: '6th', city: 'Sparks', state: 'Nevada' },
+  { street: 'Sherman', city: 'Dallas', state: 'Texas' },
+  { street: 'Ohio', city: 'Oceanside', state: 'California' },
+  { street: '3rd', city: 'Lubbock', state: 'Texas' },
+  { street: 'Michigan', city: 'Pittsburgh', state: 'Pennsylvania' },
+  { street: 'Paget', city: 'Columbia', state: 'South Carolina' },
+  { street: 'Swallow', city: 'Watertown', state: 'Massachusetts' },
+  { street: 'Pennsylvania', city: 'Peoria', state: 'Illinois' },
+  { street: 'Colorado', city: 'Stockton', state: 'California' },
+  { street: 'Menomonie', city: 'Silver Spring', state: 'Maryland' },
+  { street: 'Fulton', city: 'Corpus Christi', state: 'Texas' },
+  { street: 'Blue Bill Park', city: 'Honolulu', state: 'Hawaii' },
+  { street: 'Caliangt', city: 'Saint Louis', state: 'Missouri' },
+  { street: 'Express', city: 'Rochester', state: 'New York' },
+  { street: 'Golf View', city: 'Topeka', state: 'Kansas' },
+  { street: 'Hudson', city: 'Memphis', state: 'Tennessee' },
+  { street: 'Kedzie', city: 'Washington', state: 'District of Columbia' },
+  { street: 'Ohio', city: 'El Paso', state: 'Texas' },
+  { street: 'Shoshone', city: 'Phoenix', state: 'Arizona' },
+  { street: 'Hayes', city: 'Macon', state: 'Georgia' },
+  { street: 'Michigan', city: 'Brooklyn', state: 'New York' },
+  { street: 'Warner', city: 'Bronx', state: 'New York' },
+  { street: 'Rockefeller', city: 'Mountain View', state: 'California' },
+  { street: 'Hermina', city: 'Des Moines', state: 'Iowa' },
+  { street: 'Menomonie', city: 'Dallas', state: 'Texas' },
+  { street: 'Algoma', city: 'Rochester', state: 'Minnesota' },
+  { street: 'Dryden', city: 'Wichita', state: 'Kansas' },
+  { street: 'Oxford', city: 'Indianapolis', state: 'Indiana' },
+  { street: 'Debra', city: 'Wichita Falls', state: 'Texas' },
+  { street: 'Dovetail', city: 'Cedar Rapids', state: 'Iowa' },
+  { street: 'Old Shore', city: 'Murfreesboro', state: 'Tennessee' },
+  { street: 'Nelson', city: 'Jackson', state: 'Mississippi' },
+  { street: 'Northland', city: 'Pensacola', state: 'Florida' },
+  { street: 'Sunfield', city: 'Indianapolis', state: 'Indiana' },
+  { street: 'Mitchell', city: 'Oakland', state: 'California' },
+  { street: 'Sutteridge', city: 'Saint Paul', state: 'Minnesota' },
+  { street: 'Birchwood', city: 'Petaluma', state: 'California' },
+  { street: 'Goodland', city: 'Pensacola', state: 'Florida' },
+  { street: 'Nancy', city: 'Omaha', state: 'Nebraska' },
+  { street: 'Oxford', city: 'Toledo', state: 'Ohio' },
+  { street: 'Cambridge', city: 'Rockford', state: 'Illinois' },
+  { street: 'Waxwing', city: 'New Orleans', state: 'Louisiana' },
+  { street: 'Corry', city: 'Houston', state: 'Texas' },
+  { street: 'Annamark', city: 'Decatur', state: 'Georgia' },
+  { street: 'Dottie', city: 'Charleston', state: 'West Virginia' },
+  { street: 'Westridge', city: 'Sarasota', state: 'Florida' },
+  { street: 'Sugar', city: 'Baton Rouge', state: 'Louisiana' },
+  { street: 'Magdeline', city: 'Kent', state: 'Washington' },
+  { street: 'Jenifer', city: 'Portland', state: 'Oregon' },
+  { street: 'Grayhawk', city: 'Sacramento', state: 'California' },
+  { street: 'Knutson', city: 'Athens', state: 'Georgia' },
+  { street: 'Carey', city: 'Washington', state: 'District of Columbia' },
+  { street: 'Briar Crest', city: 'Hagerstown', state: 'Maryland' },
+  { street: 'Dovetail', city: 'Oakland', state: 'California' },
+  { street: 'Dixon', city: 'Orlando', state: 'Florida' },
+  { street: 'Susan', city: 'San Antonio', state: 'Texas' },
+  { street: 'Banding', city: 'Yakima', state: 'Washington' },
+  { street: 'Reindahl', city: 'Saint Louis', state: 'Missouri' },
+  { street: 'Schurz', city: 'Humble', state: 'Texas' },
+  { street: 'Northview', city: 'El Paso', state: 'Texas' },
+  { street: 'Shasta', city: 'Colorado Springs', state: 'Colorado' },
+  { street: 'East', city: 'Anchorage', state: 'Alaska' },
+  { street: 'Utah', city: 'Oklahoma City', state: 'Oklahoma' },
+  { street: 'Browning', city: 'Baltimore', state: 'Maryland' },
+  { street: 'Vahlen', city: 'West Palm Beach', state: 'Florida' },
+  { street: 'Donald', city: 'Memphis', state: 'Tennessee' },
+  { street: 'Dapin', city: 'Portland', state: 'Oregon' },
+  { street: 'Orin', city: 'Nashville', state: 'Tennessee' },
+  { street: 'Southridge', city: 'New York City', state: 'New York' },
+  { street: 'Parkside', city: 'Houston', state: 'Texas' },
+  { street: 'Northridge', city: 'Indianapolis', state: 'Indiana' },
+  { street: 'Tomscot', city: 'San Francisco', state: 'California' },
+  { street: 'Del Sol', city: 'New York City', state: 'New York' },
+  {
+    street: 'Kenwood',
+    city: 'Washington',
+    state: 'District of Columbia',
+  },
+  { street: 'Dovetail', city: 'Chicago', state: 'Illinois' },
+  { street: 'Hoard', city: 'Dayton', state: 'Ohio' },
+  { street: 'Arrowood', city: 'Herndon', state: 'Virginia' },
+  { street: 'Carberry', city: 'Young America', state: 'Minnesota' },
+  { street: 'Morrow', city: 'Sparks', state: 'Nevada' },
+  { street: 'Sunfield', city: 'Long Beach', state: 'California' },
+  { street: 'Scott', city: 'Bradenton', state: 'Florida' },
+  { street: 'Gulseth', city: 'Houston', state: 'Texas' },
+  { street: 'Pond', city: 'Lansing', state: 'Michigan' },
+  { street: 'Knutson', city: 'New York City', state: 'New York' },
+  { street: 'Westerfield', city: 'Nashville', state: 'Tennessee' },
+  { street: 'Oriole', city: 'Fort Pierce', state: 'Florida' },
+  { street: 'Messerschmidt', city: 'Sioux City', state: 'Iowa' },
 ]

From bb0ae9dcdfe8a5ce114b49637b08c3488281de8a Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Fri, 24 Jul 2020 16:34:20 -0400
Subject: [PATCH 21/32] Add extra data and highlight to suggestion

---
 react/LocationSearch.tsx | 56 +++++++++++++++++++++++++++++++++-------
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index b043bdb..09c33e6 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -10,19 +10,56 @@ import {
   ComboboxPopover,
   ComboboxList,
 } from './components/Combobox'
-import { addresses as mockedAddresses } from './addresses'
+import { locations, Location } from './addresses'
 import styles from './LocationSearch.css'
 import PlaceIcon from './components/PlaceIcon'
 
 const MAX_DROPDOWN_ADDRESSES = 6
 
+interface Interval {
+  offset: number
+  size: number
+}
+
+interface Suggestion {
+  description: string
+  mainText: string
+  mainTextMatchInterval: Interval
+  secondaryText: string
+}
+
+const renderSuggestionText = (suggestion: Suggestion) => {
+  const { mainText } = suggestion
+  const { offset, size } = suggestion.mainTextMatchInterval
+  return (
+    <div className="truncate c-muted-2">
+      <span className="c-on-base">{mainText.substr(0, offset)}</span>
+      <em className="c-on-base fs-normal b">{mainText.substr(offset, size)}</em>
+      <span className="c-on-base">{mainText.substr(size + offset)}</span>
+      <span> {suggestion.secondaryText}</span>
+    </div>
+  )
+}
+
 // This function will be replaced in the future, after integrating the
 // component with GraphQL queries.
 const getAddresses = (searchTerm: string) => {
-  return mockedAddresses
-    .filter((address: string) =>
-      address.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase())
+  return locations
+    .filter(
+      (location: Location) =>
+        ~location.street.toLowerCase().indexOf(searchTerm.toLowerCase())
     )
+    .map((location: Location) => {
+      const mainText = location.street
+      // never will be -1
+      const offset = mainText.toLowerCase().indexOf(searchTerm.toLowerCase())
+      return {
+        description: `${location.street}, ${location.city}, ${location.state}`,
+        mainText,
+        secondaryText: `${location.city}, ${location.state}`,
+        mainTextMatchInterval: { offset, size: searchTerm.length },
+      } as Suggestion
+    })
     .slice(0, MAX_DROPDOWN_ADDRESSES)
 }
 
@@ -101,11 +138,10 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
             <>
               <ComboboxList>
                 {addresses.map((address, index) => (
-                  <ComboboxOption
-                    icon={<PlaceIcon />}
-                    value={address}
-                    key={index}
-                  />
+                  <ComboboxOption value={address.description} key={index}>
+                    <PlaceIcon className="flex flex-shrink-0 mr4" />
+                    {renderSuggestionText(address)}
+                  </ComboboxOption>
                 ))}
               </ComboboxList>
               {renderEngineLogo && (
@@ -115,7 +151,7 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
               )}
             </>
           ) : (
-            <div className="flex items-center pv3 ph5 c-disabled">
+            <div className="flex items-center pv3 ph5 c-muted-2">
               <div className="flex flex-shrink-0 mr4">
                 <IconWarning />
               </div>

From c562b3b9f9ea9637f82eabfad2804fe0bcaeded4 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Fri, 24 Jul 2020 18:21:03 -0400
Subject: [PATCH 22/32] Decouple data fetching logic from the component

---
 react/LocationSearch.tsx |  38 ++----
 react/addresses.tsx      | 270 ---------------------------------------
 2 files changed, 9 insertions(+), 299 deletions(-)
 delete mode 100644 react/addresses.tsx

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 09c33e6..6258d20 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -10,18 +10,15 @@ import {
   ComboboxPopover,
   ComboboxList,
 } from './components/Combobox'
-import { locations, Location } from './addresses'
 import styles from './LocationSearch.css'
 import PlaceIcon from './components/PlaceIcon'
 
-const MAX_DROPDOWN_ADDRESSES = 6
-
 interface Interval {
   offset: number
   size: number
 }
 
-interface Suggestion {
+export interface Suggestion {
   description: string
   mainText: string
   mainTextMatchInterval: Interval
@@ -34,46 +31,29 @@ const renderSuggestionText = (suggestion: Suggestion) => {
   return (
     <div className="truncate c-muted-2">
       <span className="c-on-base">{mainText.substr(0, offset)}</span>
-      <em className="c-on-base fs-normal b">{mainText.substr(offset, size)}</em>
+      <span className="c-on-base b">{mainText.substr(offset, size)}</span>
       <span className="c-on-base">{mainText.substr(size + offset)}</span>
-      <span> {suggestion.secondaryText}</span>
+      <span>{` ${suggestion.secondaryText}`}</span>
     </div>
   )
 }
 
-// This function will be replaced in the future, after integrating the
-// component with GraphQL queries.
-const getAddresses = (searchTerm: string) => {
-  return locations
-    .filter(
-      (location: Location) =>
-        ~location.street.toLowerCase().indexOf(searchTerm.toLowerCase())
-    )
-    .map((location: Location) => {
-      const mainText = location.street
-      // never will be -1
-      const offset = mainText.toLowerCase().indexOf(searchTerm.toLowerCase())
-      return {
-        description: `${location.street}, ${location.city}, ${location.state}`,
-        mainText,
-        secondaryText: `${location.city}, ${location.state}`,
-        mainTextMatchInterval: { offset, size: searchTerm.length },
-      } as Suggestion
-    })
-    .slice(0, MAX_DROPDOWN_ADDRESSES)
-}
-
 interface LocationSearchProps {
+  getAddresses: (searchTerm: string) => Suggestion[]
   onSelectAddress?: (selectedAddress: string) => void
   renderEngineLogo?: () => React.ReactNode
 }
 
 const LocationSearch: React.FC<LocationSearchProps> = ({
+  getAddresses,
   onSelectAddress,
   renderEngineLogo,
 }) => {
   const [searchTerm, setSearchTerm] = useState<string>('')
-  const addresses = useMemo(() => getAddresses(searchTerm), [searchTerm])
+  const addresses = useMemo(() => getAddresses(searchTerm), [
+    getAddresses,
+    searchTerm,
+  ])
   const inputWrapperRef = useRef<HTMLDivElement>(null)
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
diff --git a/react/addresses.tsx b/react/addresses.tsx
deleted file mode 100644
index be59e90..0000000
--- a/react/addresses.tsx
+++ /dev/null
@@ -1,270 +0,0 @@
-export interface Location {
-  street: string
-  city: string
-  state: string
-}
-
-export const locations: Location[] = [
-  { street: 'Grasskamp', city: 'Lancaster', state: 'Pennsylvania' },
-  { street: 'Darwin', city: 'Valley Forge', state: 'Pennsylvania' },
-  { street: 'Dayton', city: 'Glendale', state: 'California' },
-  { street: 'Anzinger', city: 'Tuscaloosa', state: 'Alabama' },
-  { street: 'Blackbird', city: 'Lubbock', state: 'Texas' },
-  { street: 'Golden Leaf', city: 'Salem', state: 'Oregon' },
-  { street: 'Longview', city: 'Greeley', state: 'Colorado' },
-  { street: 'Elka', city: 'Houston', state: 'Texas' },
-  { street: 'Fremont', city: 'Salinas', state: 'California' },
-  { street: 'Del Mar', city: 'Austin', state: 'Texas' },
-  { street: 'Heffernan', city: 'Naples', state: 'Florida' },
-  { street: 'Vidon', city: 'Shreveport', state: 'Louisiana' },
-  { street: 'Gale', city: 'Colorado Springs', state: 'Colorado' },
-  { street: 'Hanson', city: 'Macon', state: 'Georgia' },
-  { street: 'Hermina', city: 'Sacramento', state: 'California' },
-  { street: 'Saint Paul', city: 'New York City', state: 'New York' },
-  { street: 'Vermont', city: 'Springfield', state: 'Illinois' },
-  { street: 'Weeping Birch', city: 'Pueblo', state: 'Colorado' },
-  { street: 'Artisan', city: 'Worcester', state: 'Massachusetts' },
-  { street: 'Hovde', city: 'Sacramento', state: 'California' },
-  { street: 'Crownhardt', city: 'New York City', state: 'New York' },
-  { street: 'Dakota', city: 'Minneapolis', state: 'Minnesota' },
-  { street: 'Trailsway', city: 'Laredo', state: 'Texas' },
-  { street: 'Artisan', city: 'Juneau', state: 'Alaska' },
-  { street: 'Florence', city: 'Henderson', state: 'Nevada' },
-  { street: 'Northport', city: 'Philadelphia', state: 'Pennsylvania' },
-  { street: 'Weeping Birch', city: 'Evansville', state: 'Indiana' },
-  { street: 'Daystar', city: 'Winston Salem', state: 'North Carolina' },
-  { street: 'Larry', city: 'Miami Beach', state: 'Florida' },
-  { street: 'Spohn', city: 'Kansas City', state: 'Kansas' },
-  {
-    street: 'Westerfield',
-    city: 'Washington',
-    state: 'District of Columbia',
-  },
-  { street: 'Farwell', city: 'San Diego', state: 'California' },
-  { street: 'La Follette', city: 'Dallas', state: 'Texas' },
-  { street: 'Parkside', city: 'Memphis', state: 'Tennessee' },
-  { street: 'Mitchell', city: 'Philadelphia', state: 'Pennsylvania' },
-  { street: 'Ridge Oak', city: 'Charlotte', state: 'North Carolina' },
-  { street: 'Myrtle', city: 'Odessa', state: 'Texas' },
-  { street: 'Forest Run', city: 'Valdosta', state: 'Georgia' },
-  { street: 'Grover', city: 'Dulles', state: 'Virginia' },
-  { street: 'Fulton', city: 'Columbus', state: 'Ohio' },
-  { street: 'Mallard', city: 'Charleston', state: 'West Virginia' },
-  { street: 'Corben', city: 'Wichita', state: 'Kansas' },
-  { street: 'Maple', city: 'Houston', state: 'Texas' },
-  { street: 'Center', city: 'Mobile', state: 'Alabama' },
-  { street: 'Elgar', city: 'Charlotte', state: 'North Carolina' },
-  { street: 'Oriole', city: 'Clearwater', state: 'Florida' },
-  { street: 'Melrose', city: 'Saint Louis', state: 'Missouri' },
-  { street: 'Independence', city: 'Fort Worth', state: 'Texas' },
-  { street: 'Welch', city: 'Syracuse', state: 'New York' },
-  { street: 'Badeau', city: 'San Antonio', state: 'Texas' },
-  { street: 'Randy', city: 'Corpus Christi', state: 'Texas' },
-  { street: 'Roth', city: 'Portland', state: 'Oregon' },
-  { street: 'Macpherson', city: 'Asheville', state: 'North Carolina' },
-  { street: 'Burrows', city: 'Minneapolis', state: 'Minnesota' },
-  { street: 'Stoughton', city: 'Minneapolis', state: 'Minnesota' },
-  { street: 'Hazelcrest', city: 'Fresno', state: 'California' },
-  { street: 'Bellgrove', city: 'Honolulu', state: 'Hawaii' },
-  { street: 'Dakota', city: 'Miami', state: 'Florida' },
-  { street: 'Dapin', city: 'Pittsburgh', state: 'Pennsylvania' },
-  { street: 'Westport', city: 'Boise', state: 'Idaho' },
-  { street: 'Lotheville', city: 'Erie', state: 'Pennsylvania' },
-  { street: 'Kings', city: 'Atlanta', state: 'Georgia' },
-  { street: 'Miller', city: 'Schenectady', state: 'New York' },
-  { street: '8th', city: 'Charleston', state: 'West Virginia' },
-  { street: 'Florence', city: 'Houston', state: 'Texas' },
-  { street: 'Cascade', city: 'Vancouver', state: 'Washington' },
-  { street: 'Stuart', city: 'Roanoke', state: 'Virginia' },
-  { street: 'Golden Leaf', city: 'Portland', state: 'Oregon' },
-  { street: 'Green', city: 'Trenton', state: 'New Jersey' },
-  { street: 'Rutledge', city: 'Dallas', state: 'Texas' },
-  { street: 'Westridge', city: 'Dallas', state: 'Texas' },
-  { street: 'Glacier Hill', city: 'Lehigh Acres', state: 'Florida' },
-  { street: 'East', city: 'Watertown', state: 'Massachusetts' },
-  { street: 'Manitowish', city: 'Honolulu', state: 'Hawaii' },
-  { street: 'Rusk', city: 'New Orleans', state: 'Louisiana' },
-  { street: 'Graceland', city: 'Spring Hill', state: 'Florida' },
-  { street: 'Schiller', city: 'Phoenix', state: 'Arizona' },
-  { street: 'Vidon', city: 'El Paso', state: 'Texas' },
-  { street: 'Marcy', city: 'Los Angeles', state: 'California' },
-  { street: 'Commercial', city: 'New Orleans', state: 'Louisiana' },
-  { street: 'Clove', city: 'San Francisco', state: 'California' },
-  { street: 'Schiller', city: 'Salt Lake City', state: 'Utah' },
-  { street: 'Fulton', city: 'Tacoma', state: 'Washington' },
-  { street: 'Bunting', city: 'Birmingham', state: 'Alabama' },
-  { street: 'Spenser', city: 'Minneapolis', state: 'Minnesota' },
-  { street: 'Green Ridge', city: 'Dallas', state: 'Texas' },
-  { street: 'Jay', city: 'Fort Pierce', state: 'Florida' },
-  { street: 'Kedzie', city: 'Baton Rouge', state: 'Louisiana' },
-  { street: 'Pennsylvania', city: 'Terre Haute', state: 'Indiana' },
-  { street: 'Fremont', city: 'Salem', state: 'Oregon' },
-  { street: 'Linden', city: 'Houston', state: 'Texas' },
-  { street: 'Rockefeller', city: 'Hartford', state: 'Connecticut' },
-  { street: 'Dovetail', city: 'Bloomington', state: 'Indiana' },
-  { street: 'La Follette', city: 'Simi Valley', state: 'California' },
-  { street: 'Mandrake', city: 'Bethesda', state: 'Maryland' },
-  { street: 'Artisan', city: 'Tulsa', state: 'Oklahoma' },
-  { street: 'Towne', city: 'Tucson', state: 'Arizona' },
-  { street: 'Burrows', city: 'Milwaukee', state: 'Wisconsin' },
-  { street: 'Mitchell', city: 'Fullerton', state: 'California' },
-  { street: 'Northview', city: 'Brooklyn', state: 'New York' },
-  { street: 'Fremont', city: 'Springfield', state: 'Illinois' },
-  {
-    street: 'Wayridge',
-    city: 'Washington',
-    state: 'District of Columbia',
-  },
-  { street: 'Atwood', city: 'Las Vegas', state: 'Nevada' },
-  { street: 'Debra', city: 'Oxnard', state: 'California' },
-  { street: 'Blaine', city: 'Saint Louis', state: 'Missouri' },
-  { street: 'Prairieview', city: 'Sacramento', state: 'California' },
-  { street: 'Anniversary', city: 'Cincinnati', state: 'Ohio' },
-  { street: 'Continental', city: 'Rochester', state: 'New York' },
-  { street: 'Tennyson', city: 'Abilene', state: 'Texas' },
-  { street: 'Columbus', city: 'Norwalk', state: 'Connecticut' },
-  { street: 'Heath', city: 'Hartford', state: 'Connecticut' },
-  { street: 'Memorial', city: 'Spring Hill', state: 'Florida' },
-  { street: 'Randy', city: 'Newton', state: 'Massachusetts' },
-  { street: 'Arizona', city: 'San Jose', state: 'California' },
-  { street: 'Veith', city: 'El Paso', state: 'Texas' },
-  { street: 'Londonderry', city: 'Dallas', state: 'Texas' },
-  { street: 'Veith', city: 'Killeen', state: 'Texas' },
-  { street: 'Clemons', city: 'Pasadena', state: 'California' },
-  { street: 'Bluestem', city: 'Newark', state: 'Delaware' },
-  { street: 'Anhalt', city: 'Dayton', state: 'Ohio' },
-  { street: 'Westridge', city: 'Louisville', state: 'Kentucky' },
-  { street: 'Shasta', city: 'Orange', state: 'California' },
-  { street: 'Memorial', city: 'Independence', state: 'Missouri' },
-  { street: 'Hauk', city: 'Columbus', state: 'Ohio' },
-  { street: 'Evergreen', city: 'Indianapolis', state: 'Indiana' },
-  { street: 'Tennyson', city: 'Houston', state: 'Texas' },
-  { street: 'Washington', city: 'Albuquerque', state: 'New Mexico' },
-  { street: 'Wayridge', city: 'Anchorage', state: 'Alaska' },
-  { street: 'Blackbird', city: 'Charlotte', state: 'North Carolina' },
-  { street: 'Steensland', city: 'Dallas', state: 'Texas' },
-  { street: 'Oxford', city: 'Denton', state: 'Texas' },
-  { street: 'Bunting', city: 'El Paso', state: 'Texas' },
-  { street: 'Kenwood', city: 'Gainesville', state: 'Florida' },
-  { street: 'Eggendart', city: 'Merrifield', state: 'Virginia' },
-  { street: 'Gale', city: 'Pittsburgh', state: 'Pennsylvania' },
-  { street: 'Dovetail', city: 'Fresno', state: 'California' },
-  { street: 'Jana', city: 'Plano', state: 'Texas' },
-  { street: 'Utah', city: 'El Paso', state: 'Texas' },
-  { street: 'Sloan', city: 'Raleigh', state: 'North Carolina' },
-  { street: 'Saint Paul', city: 'Saint Paul', state: 'Minnesota' },
-  { street: 'Hagan', city: 'Omaha', state: 'Nebraska' },
-  { street: 'Haas', city: 'Chicago', state: 'Illinois' },
-  { street: 'Dawn', city: 'Charleston', state: 'West Virginia' },
-  { street: 'Butterfield', city: 'Springfield', state: 'Virginia' },
-  { street: 'Anthes', city: 'Amarillo', state: 'Texas' },
-  { street: 'Pawling', city: 'Saint Louis', state: 'Missouri' },
-  { street: 'Corry', city: 'Chicago', state: 'Illinois' },
-  { street: 'Clarendon', city: 'Chula Vista', state: 'California' },
-  { street: 'Schurz', city: 'Minneapolis', state: 'Minnesota' },
-  { street: 'American', city: 'Phoenix', state: 'Arizona' },
-  { street: 'Iowa', city: 'Amarillo', state: 'Texas' },
-  { street: 'Helena', city: 'Lexington', state: 'Kentucky' },
-  { street: 'Butterfield', city: 'Beaverton', state: 'Oregon' },
-  { street: 'Drewry', city: 'Des Moines', state: 'Iowa' },
-  { street: 'Nancy', city: 'San Diego', state: 'California' },
-  { street: 'Hudson', city: 'San Jose', state: 'California' },
-  { street: 'Hagan', city: 'Nashville', state: 'Tennessee' },
-  { street: 'Kipling', city: 'Atlanta', state: 'Georgia' },
-  { street: 'Hoffman', city: 'Apache Junction', state: 'Arizona' },
-  { street: 'Schlimgen', city: 'Mc Keesport', state: 'Pennsylvania' },
-  { street: 'Valley Edge', city: 'Tampa', state: 'Florida' },
-  { street: 'Cottonwood', city: 'Houston', state: 'Texas' },
-  { street: 'Moulton', city: 'Akron', state: 'Ohio' },
-  { street: '6th', city: 'Sparks', state: 'Nevada' },
-  { street: 'Sherman', city: 'Dallas', state: 'Texas' },
-  { street: 'Ohio', city: 'Oceanside', state: 'California' },
-  { street: '3rd', city: 'Lubbock', state: 'Texas' },
-  { street: 'Michigan', city: 'Pittsburgh', state: 'Pennsylvania' },
-  { street: 'Paget', city: 'Columbia', state: 'South Carolina' },
-  { street: 'Swallow', city: 'Watertown', state: 'Massachusetts' },
-  { street: 'Pennsylvania', city: 'Peoria', state: 'Illinois' },
-  { street: 'Colorado', city: 'Stockton', state: 'California' },
-  { street: 'Menomonie', city: 'Silver Spring', state: 'Maryland' },
-  { street: 'Fulton', city: 'Corpus Christi', state: 'Texas' },
-  { street: 'Blue Bill Park', city: 'Honolulu', state: 'Hawaii' },
-  { street: 'Caliangt', city: 'Saint Louis', state: 'Missouri' },
-  { street: 'Express', city: 'Rochester', state: 'New York' },
-  { street: 'Golf View', city: 'Topeka', state: 'Kansas' },
-  { street: 'Hudson', city: 'Memphis', state: 'Tennessee' },
-  { street: 'Kedzie', city: 'Washington', state: 'District of Columbia' },
-  { street: 'Ohio', city: 'El Paso', state: 'Texas' },
-  { street: 'Shoshone', city: 'Phoenix', state: 'Arizona' },
-  { street: 'Hayes', city: 'Macon', state: 'Georgia' },
-  { street: 'Michigan', city: 'Brooklyn', state: 'New York' },
-  { street: 'Warner', city: 'Bronx', state: 'New York' },
-  { street: 'Rockefeller', city: 'Mountain View', state: 'California' },
-  { street: 'Hermina', city: 'Des Moines', state: 'Iowa' },
-  { street: 'Menomonie', city: 'Dallas', state: 'Texas' },
-  { street: 'Algoma', city: 'Rochester', state: 'Minnesota' },
-  { street: 'Dryden', city: 'Wichita', state: 'Kansas' },
-  { street: 'Oxford', city: 'Indianapolis', state: 'Indiana' },
-  { street: 'Debra', city: 'Wichita Falls', state: 'Texas' },
-  { street: 'Dovetail', city: 'Cedar Rapids', state: 'Iowa' },
-  { street: 'Old Shore', city: 'Murfreesboro', state: 'Tennessee' },
-  { street: 'Nelson', city: 'Jackson', state: 'Mississippi' },
-  { street: 'Northland', city: 'Pensacola', state: 'Florida' },
-  { street: 'Sunfield', city: 'Indianapolis', state: 'Indiana' },
-  { street: 'Mitchell', city: 'Oakland', state: 'California' },
-  { street: 'Sutteridge', city: 'Saint Paul', state: 'Minnesota' },
-  { street: 'Birchwood', city: 'Petaluma', state: 'California' },
-  { street: 'Goodland', city: 'Pensacola', state: 'Florida' },
-  { street: 'Nancy', city: 'Omaha', state: 'Nebraska' },
-  { street: 'Oxford', city: 'Toledo', state: 'Ohio' },
-  { street: 'Cambridge', city: 'Rockford', state: 'Illinois' },
-  { street: 'Waxwing', city: 'New Orleans', state: 'Louisiana' },
-  { street: 'Corry', city: 'Houston', state: 'Texas' },
-  { street: 'Annamark', city: 'Decatur', state: 'Georgia' },
-  { street: 'Dottie', city: 'Charleston', state: 'West Virginia' },
-  { street: 'Westridge', city: 'Sarasota', state: 'Florida' },
-  { street: 'Sugar', city: 'Baton Rouge', state: 'Louisiana' },
-  { street: 'Magdeline', city: 'Kent', state: 'Washington' },
-  { street: 'Jenifer', city: 'Portland', state: 'Oregon' },
-  { street: 'Grayhawk', city: 'Sacramento', state: 'California' },
-  { street: 'Knutson', city: 'Athens', state: 'Georgia' },
-  { street: 'Carey', city: 'Washington', state: 'District of Columbia' },
-  { street: 'Briar Crest', city: 'Hagerstown', state: 'Maryland' },
-  { street: 'Dovetail', city: 'Oakland', state: 'California' },
-  { street: 'Dixon', city: 'Orlando', state: 'Florida' },
-  { street: 'Susan', city: 'San Antonio', state: 'Texas' },
-  { street: 'Banding', city: 'Yakima', state: 'Washington' },
-  { street: 'Reindahl', city: 'Saint Louis', state: 'Missouri' },
-  { street: 'Schurz', city: 'Humble', state: 'Texas' },
-  { street: 'Northview', city: 'El Paso', state: 'Texas' },
-  { street: 'Shasta', city: 'Colorado Springs', state: 'Colorado' },
-  { street: 'East', city: 'Anchorage', state: 'Alaska' },
-  { street: 'Utah', city: 'Oklahoma City', state: 'Oklahoma' },
-  { street: 'Browning', city: 'Baltimore', state: 'Maryland' },
-  { street: 'Vahlen', city: 'West Palm Beach', state: 'Florida' },
-  { street: 'Donald', city: 'Memphis', state: 'Tennessee' },
-  { street: 'Dapin', city: 'Portland', state: 'Oregon' },
-  { street: 'Orin', city: 'Nashville', state: 'Tennessee' },
-  { street: 'Southridge', city: 'New York City', state: 'New York' },
-  { street: 'Parkside', city: 'Houston', state: 'Texas' },
-  { street: 'Northridge', city: 'Indianapolis', state: 'Indiana' },
-  { street: 'Tomscot', city: 'San Francisco', state: 'California' },
-  { street: 'Del Sol', city: 'New York City', state: 'New York' },
-  {
-    street: 'Kenwood',
-    city: 'Washington',
-    state: 'District of Columbia',
-  },
-  { street: 'Dovetail', city: 'Chicago', state: 'Illinois' },
-  { street: 'Hoard', city: 'Dayton', state: 'Ohio' },
-  { street: 'Arrowood', city: 'Herndon', state: 'Virginia' },
-  { street: 'Carberry', city: 'Young America', state: 'Minnesota' },
-  { street: 'Morrow', city: 'Sparks', state: 'Nevada' },
-  { street: 'Sunfield', city: 'Long Beach', state: 'California' },
-  { street: 'Scott', city: 'Bradenton', state: 'Florida' },
-  { street: 'Gulseth', city: 'Houston', state: 'Texas' },
-  { street: 'Pond', city: 'Lansing', state: 'Michigan' },
-  { street: 'Knutson', city: 'New York City', state: 'New York' },
-  { street: 'Westerfield', city: 'Nashville', state: 'Tennessee' },
-  { street: 'Oriole', city: 'Fort Pierce', state: 'Florida' },
-  { street: 'Messerschmidt', city: 'Sioux City', state: 'Iowa' },
-]

From 3ad803d02d461f42c01c8a96ab579a0862ee7e45 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Fri, 24 Jul 2020 19:44:27 -0400
Subject: [PATCH 23/32] Fix Place Icon color

---
 react/LocationSearch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 6258d20..278f37c 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -119,7 +119,7 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
               <ComboboxList>
                 {addresses.map((address, index) => (
                   <ComboboxOption value={address.description} key={index}>
-                    <PlaceIcon className="flex flex-shrink-0 mr4" />
+                    <PlaceIcon className="flex flex-shrink-0 mr4 c-muted-1" />
                     {renderSuggestionText(address)}
                   </ComboboxOption>
                 ))}

From 734f0fc0fe3c7e00fe038a74029fa01de791c988 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Fri, 24 Jul 2020 19:54:11 -0400
Subject: [PATCH 24/32] Fix clear icon color on hover

---
 react/LocationSearch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 278f37c..20fabf0 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -91,7 +91,7 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
                   // the input can be cleared by pressing the esc key,
                   // so the clear button should not be tabbable
                   tabIndex={-1}
-                  className="pointer c-muted-3 flex justify-center items-center outline-0"
+                  className="pointer c-muted-3 hover-gray flex justify-center items-center outline-0"
                   onClick={() => setSearchTerm('')}
                   onKeyPress={() => {}}
                 >

From e44fe2510640e301f43b48b35bd7e39c39fda650 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Fri, 24 Jul 2020 20:06:20 -0400
Subject: [PATCH 25/32] Fix option color when active

---
 react/components/Combobox.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/react/components/Combobox.css b/react/components/Combobox.css
index 6d3124c..3ac377d 100644
--- a/react/components/Combobox.css
+++ b/react/components/Combobox.css
@@ -6,6 +6,10 @@
   background-color: transparent;
 }
 
+.option:active {
+  background-color: #d2defc
+}
+
 .popover {
   box-shadow: 0px 1px 16px rgba(46, 46, 46, 0.12);
 }
\ No newline at end of file

From e1fdd9a404540d009d2d40a76d716b26b6039f37 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Tue, 28 Jul 2020 12:22:46 -0400
Subject: [PATCH 26/32] Fix color and text width from search failure

---
 react/LocationSearch.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 20fabf0..68064c9 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -131,11 +131,11 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
               )}
             </>
           ) : (
-            <div className="flex items-center pv3 ph5 c-muted-2">
-              <div className="flex flex-shrink-0 mr4">
+            <div className="flex items-center pv3 ph5">
+              <div className="flex flex-shrink-0 mr4 c-muted-3">
                 <IconWarning />
               </div>
-              <div className="truncate">
+              <div className="truncate c-muted-2 fw6">
                 <FormattedMessage id="place-components.label.autocompleteAddressFail" />
               </div>
             </div>

From 656efdccf2f18cffb7a7828f97d11348ac348894 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Tue, 28 Jul 2020 13:10:20 -0400
Subject: [PATCH 27/32] Increase Clear button clickable area

---
 react/LocationSearch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 68064c9..1cfd367 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -91,7 +91,7 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
                   // the input can be cleared by pressing the esc key,
                   // so the clear button should not be tabbable
                   tabIndex={-1}
-                  className="pointer c-muted-3 hover-gray flex justify-center items-center outline-0"
+                  className="flex pa3 na3 pointer outline-0 c-muted-3 hover-gray"
                   onClick={() => setSearchTerm('')}
                   onKeyPress={() => {}}
                 >

From a2caaa27a4f25ddce94fd3596beb476684fd4356 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Tue, 28 Jul 2020 15:07:00 -0400
Subject: [PATCH 28/32] Let component width be handled by parent

---
 react/LocationSearch.css | 3 ---
 react/LocationSearch.tsx | 3 +--
 2 files changed, 1 insertion(+), 5 deletions(-)
 delete mode 100644 react/LocationSearch.css

diff --git a/react/LocationSearch.css b/react/LocationSearch.css
deleted file mode 100644
index 207b140..0000000
--- a/react/LocationSearch.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.locationSearch {
-  max-width: 18rem;
-}
diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 1cfd367..925610e 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -10,7 +10,6 @@ import {
   ComboboxPopover,
   ComboboxList,
 } from './components/Combobox'
-import styles from './LocationSearch.css'
 import PlaceIcon from './components/PlaceIcon'
 
 interface Interval {
@@ -69,7 +68,7 @@ const LocationSearch: React.FC<LocationSearchProps> = ({
   }
 
   return (
-    <div className={`${styles.locationSearch} w-100`}>
+    <div className="w-100">
       <Combobox onSelect={handleAddressSelection}>
         <div ref={inputWrapperRef}>
           <ComboboxInput

From 9823bf7321e072dbe90889b79e562a72dccfb692 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Wed, 29 Jul 2020 16:16:29 -0400
Subject: [PATCH 29/32] Simplify renderSuggestionText

---
 react/LocationSearch.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 925610e..7ff3066 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -29,9 +29,11 @@ const renderSuggestionText = (suggestion: Suggestion) => {
   const { offset, size } = suggestion.mainTextMatchInterval
   return (
     <div className="truncate c-muted-2">
-      <span className="c-on-base">{mainText.substr(0, offset)}</span>
-      <span className="c-on-base b">{mainText.substr(offset, size)}</span>
-      <span className="c-on-base">{mainText.substr(size + offset)}</span>
+      <span className="c-on-base">
+        {mainText.substr(0, offset)}
+        <span className="b">{mainText.substr(offset, size)}</span>
+        {mainText.substr(size + offset)}
+      </span>
       <span>{` ${suggestion.secondaryText}`}</span>
     </div>
   )

From 94ba39f0a87d802cb78eb9e5e849f89fb472ee03 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 30 Jul 2020 14:55:34 -0400
Subject: [PATCH 30/32] Remove unused abstraction

---
 react/components/Combobox.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
index 737d1eb..c2cdab3 100644
--- a/react/components/Combobox.tsx
+++ b/react/components/Combobox.tsx
@@ -48,9 +48,8 @@ export const ComboboxList: React.FC<ReachComboboxListProps & {
 )
 
 export const ComboboxOption: React.FC<ReachComboboxOptionProps & {
-  icon?: React.ReactNode
   className?: string
-}> = ({ icon, className, children, ...props }) => (
+}> = ({ className, children, ...props }) => (
   <ReachComboboxOption
     {...props}
     className={classNames(
@@ -59,14 +58,7 @@ export const ComboboxOption: React.FC<ReachComboboxOptionProps & {
       'flex items-center pointer bg-action-secondary pv3 ph5 hover-bg-action-secondary'
     )}
   >
-    {children ?? (
-      <>
-        {icon && <div className="flex flex-shrink-0 mr4">{icon}</div>}
-        <div className="truncate">
-          <ReachComboboxOptionText />
-        </div>
-      </>
-    )}
+    {children ?? <ReachComboboxOptionText />}
   </ReachComboboxOption>
 )
 

From 2c1428d580cc05b26a2f905ccb57cd018d2c258e Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 30 Jul 2020 15:04:25 -0400
Subject: [PATCH 31/32] Use styling from Tachyons

---
 react/components/Combobox.css | 4 ----
 react/components/Combobox.tsx | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/react/components/Combobox.css b/react/components/Combobox.css
index 3ac377d..6d3124c 100644
--- a/react/components/Combobox.css
+++ b/react/components/Combobox.css
@@ -6,10 +6,6 @@
   background-color: transparent;
 }
 
-.option:active {
-  background-color: #d2defc
-}
-
 .popover {
   box-shadow: 0px 1px 16px rgba(46, 46, 46, 0.12);
 }
\ No newline at end of file
diff --git a/react/components/Combobox.tsx b/react/components/Combobox.tsx
index c2cdab3..6a6905c 100644
--- a/react/components/Combobox.tsx
+++ b/react/components/Combobox.tsx
@@ -55,7 +55,7 @@ export const ComboboxOption: React.FC<ReachComboboxOptionProps & {
     className={classNames(
       className,
       styles.option,
-      'flex items-center pointer bg-action-secondary pv3 ph5 hover-bg-action-secondary'
+      'flex items-center pv3 ph5 pointer bg-action-secondary hover-bg-action-secondary active-bg-action-secondary'
     )}
   >
     {children ?? <ReachComboboxOptionText />}

From 0bfa9b305b8e73a8ad53ab32c0617f74d545d597 Mon Sep 17 00:00:00 2001
From: Wesley Rocha <wesleysr1997@gmail.com>
Date: Thu, 30 Jul 2020 15:10:25 -0400
Subject: [PATCH 32/32] Refactor nit

---
 react/LocationSearch.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/react/LocationSearch.tsx b/react/LocationSearch.tsx
index 7ff3066..994e006 100644
--- a/react/LocationSearch.tsx
+++ b/react/LocationSearch.tsx
@@ -33,8 +33,8 @@ const renderSuggestionText = (suggestion: Suggestion) => {
         {mainText.substr(0, offset)}
         <span className="b">{mainText.substr(offset, size)}</span>
         {mainText.substr(size + offset)}
-      </span>
-      <span>{` ${suggestion.secondaryText}`}</span>
+      </span>{' '}
+      <span>{suggestion.secondaryText}</span>
     </div>
   )
 }