Topbar desktop search

src/components/TopbarDesktop/TopbarDesktop.css

@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: baseline;
+  align-items: flex-start;
   padding: 0 36px;
 
   /* fill */
@@ -32,7 +32,6 @@
 
 /* logo */
 .logoLink {
-  align-self: flex-start;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -46,10 +45,8 @@
 }
 
 /* Search */
-/* TODO This is placeholder, it needs Search component */
 .searchLink {
-  min-width: 220px;
-  align-self: flex-start;
+  flex-grow: 1;
   height: 100%;
   margin-right: 24px;
 }
@@ -60,15 +57,9 @@
   color: var(--matterColor);
 }
 
-/* Spacer */
-/* Extra space is gathered between search and createListingLink */
-.spacer {
-  flex-grow: 1;
-}
-
 /* Create listing (CTA for providers) */
 .createListingLink {
-  align-self: flex-start;
+  flex-shrink: 0;
   height: 100%;
   margin-right: 24px;
 }
@@ -81,7 +72,6 @@
 
 /* Inbox */
 .inboxLink {
-  align-self: flex-start;
   height: 100%;
   margin-right: 24px;
 }
@@ -94,7 +84,6 @@
 
 /* Profile menu */
 .profileMenuLabel {
-  align-self: flex-start;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -112,13 +101,13 @@
 
 /* Authentication */
 .signupLink {
-  align-self: flex-start;
+  flex-shrink: 0;
   height: 100%;
   margin-right: 24px;
 }
 
 .loginLink {
-  align-self: flex-start;
+  flex-shrink: 0;
   height: 100%;
 }
 

src/components/TopbarDesktop/TopbarDesktop.example.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { fakeIntl } from '../../util/test-data';
 import TopbarDesktop from './TopbarDesktop';
 
@@ -9,6 +10,9 @@ export const AuthenticatedDesktopTopbar = {
     isAuthenticated: true,
     currentUserHasListings: true,
     name: 'John Doe',
+    onSearchSubmit: values => {
+      console.log('submit search:', values);
+    },
     intl: fakeIntl,
     onLogout: noop,
   },

src/components/TopbarDesktop/TopbarDesktop.js

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import { FormattedMessage, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import {
   Avatar,
@@ -10,6 +10,7 @@ import {
   MenuItem,
   NamedLink,
 } from '../../components';
+import { TopbarSearchForm } from '../../containers';
 
 import logo from './images/saunatime-logo.png';
 import css from './TopbarDesktop.css';
@@ -24,16 +25,20 @@ const TopbarDesktop = props => {
     intl,
     isAuthenticated,
     onLogout,
+    onSearchSubmit,
+    initialSearchFormValues,
   } = props;
 
   const rootClass = rootClassName || css.root;
   const classes = classNames(rootClass, className);
 
-  // TODO This is just a placeholder
   const search = (
-    <div className={css.searchLink}>
-      <span className={css.search}>Search should be here</span>
-    </div>
+    <TopbarSearchForm
+      className={css.searchLink}
+      form="TopbarSearchFormDesktop"
+      onSubmit={onSearchSubmit}
+      initialValues={initialSearchFormValues}
+    />
   );
 
   const inboxLink = isAuthenticated
@@ -83,7 +88,6 @@ const TopbarDesktop = props => {
         />
       </NamedLink>
       {search}
-      <div className={css.spacer} />
       <NamedLink className={css.createListingLink} name="NewListingPage">
         <span className={css.createListing}>
           <FormattedMessage id="TopbarDesktop.createListing" />
@@ -97,9 +101,15 @@ const TopbarDesktop = props => {
   );
 };
 
-TopbarDesktop.defaultProps = { className: null, firstName: '', lastName: '', rootClassName: '' };
+const { bool, func, string, object } = PropTypes;
 
-const { bool, func, string } = PropTypes;
+TopbarDesktop.defaultProps = {
+  firstName: '',
+  lastName: '',
+  className: null,
+  rootClassName: null,
+  initialSearchFormValues: {},
+};
 
 TopbarDesktop.propTypes = {
   className: string,
@@ -109,9 +119,9 @@ TopbarDesktop.propTypes = {
   firstName: string,
   lastName: string,
   rootClassName: string,
-
-  // from injectIntl
+  onSearchSubmit: func.isRequired,
+  initialSearchFormValues: object,
   intl: intlShape.isRequired,
 };
 
-export default injectIntl(TopbarDesktop);
+export default TopbarDesktop;

src/components/TopbarDesktop/TopbarDesktop.test.js

@@ -10,18 +10,22 @@ const noop = () => null;
 
 describe('TopbarDesktop', () => {
   it('data matches snapshot', () => {
+    window.google = { maps: {} };
     const flattenedRoutes = flattenRoutes(routesConfiguration);
+    const topbarProps = {
+      isAuthenticated: true,
+      currentUserHasListings: true,
+      name: 'John Doe',
+      onSearchSubmit: noop,
+      intl: fakeIntl,
+      onLogout: noop,
+    };
     const tree = renderDeep(
       <RoutesProvider flattenedRoutes={flattenedRoutes}>
-        <TopbarDesktop
-          isAuthenticated
-          currentUserHasListings
-          name="John Doe"
-          intl={fakeIntl}
-          onLogout={noop}
-        />
+        <TopbarDesktop {...topbarProps} />
       </RoutesProvider>
     );
+    delete window.google;
     expect(tree).toMatchSnapshot();
   });
 });

src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap

@@ -7,19 +7,29 @@ exports[`TopbarDesktop data matches snapshot 1`] = `
     onClick={[Function]}
     style={Object {}}>
     <img
-      alt="Logo"
+      alt="TopbarDesktop.logo"
       className={undefined}
       src="saunatime-logo.png" />
   </a>
-  <div
-    className={undefined}>
-    <span
-      className={undefined}>
-      Search should be here
-    </span>
-  </div>
-  <div
-    className={undefined} />
+  <form
+    className=""
+    onSubmit={[Function]}>
+    <div
+      className="">
+      <input
+        autoComplete="off"
+        autoFocus={false}
+        className=""
+        name="location"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Search saunas..."
+        type="search"
+        value="" />
+    </div>
+  </form>
   <a
     className=""
     href="/l/new"

src/containers/Topbar/Topbar.js

@@ -63,10 +63,10 @@ class TopbarComponent extends Component {
   }
 
   handleSubmit(values) {
-    const selectedPlace = values && values.location ? values.location.selectedPlace : null;
+    const { search, selectedPlace } = values.location;
     const { flattenedRoutes, history } = this.props;
-    const { address, origin, bounds, country } = selectedPlace || {};
-    const searchParams = { address, origin, bounds, country };
+    const { origin, bounds, country } = selectedPlace;
+    const searchParams = { address: search, origin, bounds, country };
     history.push(createResourceLocatorString('SearchPage', flattenedRoutes, {}, searchParams));
   }
 
@@ -142,6 +142,8 @@ class TopbarComponent extends Component {
             onLogout={this.handleLogout}
             firstName={profile.firstName}
             lastName={profile.lastName}
+            onSearchSubmit={this.handleSubmit}
+            initialSearchFormValues={initialSearchFormValues}
           />
         </div>
         <Modal

src/containers/TopbarSearchForm/TopbarSearchForm.css

@@ -8,13 +8,31 @@
   display: flex;
   height: 100%;
   flex-direction: column;
+
+  @media (--desktop-viewport) {
+    display: block;
+  }
 }
 
 .locationInput {
+  height: 72px;
+  padding: 0 18px;
+  border: none;
+  outline: none;
 
+  @media (--desktop-viewport) {
+    padding: 0;
+  }
 }
 
 .locationPredictions {
   flex-grow: 1;
   background-color: var(--marketplaceColor);
+
+  @media (--desktop-viewport) {
+    position: relative;
+    z-index: 1;
+    padding-bottom: 98px;
+    max-width: 434px;
+  }
 }