FilterPanel for SearchPage

src/components/FilterPanel/FilterPanel.css

@@ -0,0 +1,37 @@
+.filterTitle {
+  text-align: center;
+}
+
+.toListingsButton {
+  position: fixed;
+  bottom: 1rem;
+  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/FilterPanel/FilterPanel.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { NamedLink } from '../../components';
+import css from './FilterPanel.css';
+
+const FilterPanel = () => (
+  <div>
+    <h1 className={css.filterTitle}>Filters</h1>
+    <NamedLink className={css.toListingsButton} name="SearchListingsPage">See studios</NamedLink>
+    <NamedLink className={css.close} name="SearchListingsPage">X</NamedLink>
+  </div>
+);
+
+export default FilterPanel;

src/components/FilterPanel/FilterPanel.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 FilterPanel from './FilterPanel';
+
+describe('FilterPanel', () => {
+  it('matches snapshot', () => {
+    const component = renderer.create(
+      (
+        <TestProvider>
+          <RoutesProvider routes={routesConfiguration}>
+            <FilterPanel />
+          </RoutesProvider>
+        </TestProvider>
+      ),
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,22 @@
+exports[`FilterPanel matches snapshot 1`] = `
+<div>
+  <h1
+    className={undefined}>
+    Filters
+  </h1>
+  <a
+    className=""
+    href="/s/listings"
+    onClick={[Function]}
+    style={Object {}}>
+    See studios
+  </a>
+  <a
+    className=""
+    href="/s/listings"
+    onClick={[Function]}
+    style={Object {}}>
+    X
+  </a>
+</div>
+`;