diff --git a/src/containers/HeroSearchForm/HeroSearchForm.css b/src/containers/HeroSearchForm/HeroSearchForm.css new file mode 100644 index 00000000..c0f27222 --- /dev/null +++ b/src/containers/HeroSearchForm/HeroSearchForm.css @@ -0,0 +1,11 @@ +.locationInput { + width: 100%; + height: 50px; + background-color: white; +} + +.locationButton { + width: 100%; + height: 50px; + margin: 0; +} diff --git a/src/containers/HeroSearchForm/HeroSearchForm.example.js b/src/containers/HeroSearchForm/HeroSearchForm.example.js new file mode 100644 index 00000000..6f763010 --- /dev/null +++ b/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); + }, + }, +}; diff --git a/src/containers/HeroSearchForm/HeroSearchForm.js b/src/containers/HeroSearchForm/HeroSearchForm.js new file mode 100644 index 00000000..19972a95 --- /dev/null +++ b/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 ( +
+ + + + ); +}; + +HeroSearchForm.propTypes = { ...formPropTypes, intl: intlShape.isRequired }; + +export default reduxForm({ form: 'herosearchform' })(injectIntl(HeroSearchForm)) diff --git a/src/containers/HeroSearchForm/HeroSearchForm.test.js b/src/containers/HeroSearchForm/HeroSearchForm.test.js new file mode 100644 index 00000000..0c4f607d --- /dev/null +++ b/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( + ( + + + + ), + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/containers/HeroSearchForm/__snapshots__/HeroSearchForm.test.js.snap b/src/containers/HeroSearchForm/__snapshots__/HeroSearchForm.test.js.snap new file mode 100644 index 00000000..b6c2ed38 --- /dev/null +++ b/src/containers/HeroSearchForm/__snapshots__/HeroSearchForm.test.js.snap @@ -0,0 +1,24 @@ +exports[`HeroSearchForm matches snapshot 1`] = ` +
+ + +
+`; diff --git a/src/containers/index.js b/src/containers/index.js index 451075e1..0942c704 100644 --- a/src/containers/index.js +++ b/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, diff --git a/src/examples.js b/src/examples.js index 8881760b..3d6bb477 100644 --- a/src/examples.js +++ b/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, diff --git a/src/translations/en.json b/src/translations/en.json index 8669a5c4..5ce5a195 100644 --- a/src/translations/en.json +++ b/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" }