HeroSearchForm

src/containers/HeroSearchForm/HeroSearchForm.css

@@ -0,0 +1,11 @@
+.locationInput {
+  width: 100%;
+  height: 50px;
+  background-color: white;
+}
+
+.locationButton {
+  width: 100%;
+  height: 50px;
+  margin: 0;
+}

src/containers/HeroSearchForm/HeroSearchForm.example.js

@@ -0,0 +1,11 @@
+/* eslint-disable no-console, import/prefer-default-export */
+import HeroSearchForm from './HeroSearchForm';
+
+export const Empty = {
+  component: HeroSearchForm,
+  props: {
+    onSubmit(values) {
+      console.log('submit search query:', values);
+    },
+  },
+};

src/containers/HeroSearchForm/HeroSearchForm.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
+import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import css from './HeroSearchForm.css';
+
+const HeroSearchForm = props => {
+  const { className, intl, handleSubmit, pristine, submitting } = props;
+  const addClassName = className ? { className } : {};
+  const placeholderMsg = {
+    id: 'HeroSearchForm.placeholder',
+    defaultMessage: 'Location search (soon)',
+  };
+
+  return (
+    <form {...addClassName} onSubmit={handleSubmit}>
+      <Field
+        name="location"
+        className={css.locationInput}
+        component="input"
+        type="text"
+        placeholder={intl.formatMessage(placeholderMsg)}
+      />
+      <button className={css.locationButton} type="submit" disabled={pristine || submitting}>
+        <FormattedMessage id="HeroSearchForm.search" defaultMessage="Search" />
+      </button>
+    </form>
+  );
+};
+
+HeroSearchForm.propTypes = { ...formPropTypes, intl: intlShape.isRequired };
+
+export default reduxForm({ form: 'herosearchform' })(injectIntl(HeroSearchForm))

src/containers/HeroSearchForm/HeroSearchForm.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Provider } from 'react-redux';
+import { injectIntl, IntlProvider } from 'react-intl';
+import configureStore from '../../store';
+import { TestProvider } from '../../util/test-helpers';
+import HeroSearchForm from './HeroSearchForm';
+
+describe('HeroSearchForm', () => {
+  it('matches snapshot', () => {
+    const store = configureStore();
+    const component = renderer.create(
+      (
+        <TestProvider>
+          <HeroSearchForm />
+        </TestProvider>
+      ),
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/containers/HeroSearchForm/__snapshots__/HeroSearchForm.test.js.snap

@@ -0,0 +1,24 @@
+exports[`HeroSearchForm matches snapshot 1`] = `
+<form
+  onSubmit={[Function]}>
+  <input
+    className={undefined}
+    name="location"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+    onFocus={[Function]}
+    placeholder="Location search (soon)"
+    type="text"
+    value="" />
+  <button
+    className={undefined}
+    disabled={true}
+    type="submit">
+    <span>
+      Search
+    </span>
+  </button>
+</form>
+`;

src/containers/index.js

@@ -4,6 +4,7 @@ import ChangePasswordForm from './ChangePasswordForm/ChangePasswordForm';
 import CheckoutPage from './CheckoutPage/CheckoutPage';
 import ContactDetailsPage from './ContactDetailsPage/ContactDetailsPage';
 import EditProfilePage from './EditProfilePage/EditProfilePage';
+import HeroSearchForm from './HeroSearchForm/HeroSearchForm';
 import InboxPage from './InboxPage/InboxPage';
 import LandingPage from './LandingPage/LandingPage';
 import ListingPage from './ListingPage/ListingPage';
@@ -30,6 +31,7 @@ export {
   CheckoutPage,
   ContactDetailsPage,
   EditProfilePage,
+  HeroSearchForm,
   InboxPage,
   LandingPage,
   ListingPage,

src/examples.js

@@ -1,5 +1,6 @@
 import * as ChangeAccountPasswordForm from './containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example';
 import * as ChangePasswordForm from './containers/ChangePasswordForm/ChangePasswordForm.example';
+import * as HeroSearchForm from './containers/HeroSearchForm/HeroSearchForm.example';
 import * as LoginForm from './containers/LoginForm/LoginForm.example';
 import * as PasswordForgottenForm from './containers/PasswordForgottenForm/PasswordForgottenForm.example';
 import * as SignUpForm from './containers/SignUpForm/SignUpForm.example';
@@ -7,6 +8,7 @@ import * as SignUpForm from './containers/SignUpForm/SignUpForm.example';
 export {
   ChangeAccountPasswordForm,
   ChangePasswordForm,
+  HeroSearchForm,
   LoginForm,
   PasswordForgottenForm,
   SignUpForm,

src/translations/en.json

@@ -1,5 +1,7 @@
 {
   "landingpage.examplelink": "Show nice studios! (from json)",
+  "HeroSearchForm.placeholder": "Location search (soon)",
+  "HeroSearchForm.search": "Search",
   "HeroSection.title": "Book Studiotime anywhere",
   "HeroSection.subTitle": "The largest online community to rent music studios"
 }