MapPanel for SearchPage

src/components/MapPanel/MapPanel.css

@@ -0,0 +1,53 @@
+.mapContainer {
+  height: 70vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ddd;
+  color: #fff;
+  font-size: 2rem;
+}
+.mapListingsContainer {
+  height: 30vh;
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: row;
+  padding: 1rem;
+}
+
+
+.toFiltersButton {
+  position: fixed;
+  top: calc(70vh - 80px);
+  left: 50%;
+  width: 200px;
+  margin-left: -100px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  font-size: 1.4rem;
+  padding: 0.5rem;
+  color: #fff;
+  background-color: #9B9B9B;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #888;
+  }
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 3em;
+  padding: 1em;
+  color: #999;
+  text-decoration: none;
+
+  &:hover {
+    color: #000;
+  }
+}

src/components/MapPanel/MapPanel.js

@@ -0,0 +1,22 @@
+import React, { PropTypes } from 'react';
+import { NamedLink } from '../../components';
+import css from './MapPanel.css';
+
+const MapPanel = props => (
+  <div>
+    <div className={css.mapContainer}>Map</div>
+    <div className={css.mapListingsContainer}>
+      {props.children}
+    </div>
+    <NamedLink className={css.toFiltersButton} name="SearchFiltersPage">Filters</NamedLink>
+    <NamedLink className={css.close} name="SearchListingsPage">X</NamedLink>
+  </div>
+);
+
+MapPanel.defaultProps = { children: null };
+
+const { any } = PropTypes;
+
+MapPanel.propTypes = { children: any };
+
+export default MapPanel;

src/components/MapPanel/MapPanel.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { TestProvider } from '../../util/test-helpers';
+import { RoutesProvider } from '../../components';
+import routesConfiguration from '../../routesConfiguration';
+import MapPanel from './MapPanel';
+
+describe('MapPanel', () => {
+  it('matches snapshot', () => {
+    const component = renderer.create(
+      (
+        <TestProvider>
+          <RoutesProvider routes={routesConfiguration}>
+            <MapPanel />
+          </RoutesProvider>
+        </TestProvider>
+      ),
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,24 @@
+exports[`MapPanel matches snapshot 1`] = `
+<div>
+  <div
+    className={undefined}>
+    Map
+  </div>
+  <div
+    className={undefined} />
+  <a
+    className=""
+    href="/s/filters"
+    onClick={[Function]}
+    style={Object {}}>
+    Filters
+  </a>
+  <a
+    className=""
+    href="/s/listings"
+    onClick={[Function]}
+    style={Object {}}>
+    X
+  </a>
+</div>
+`;