prototype filter sidebar

client/src/routes/Search/Sidebar.module.scss

@@ -0,0 +1,37 @@
+@import '../../styles/variables';
+
+.sidebar {
+    @media (min-width: $break-point--medium) {
+        margin-top: $spacer * 1.1;
+    }
+
+    > div:first-child {
+        label {
+            visibility: hidden;
+        }
+    }
+}
+
+.filter {
+    // ul {
+    //     padding-left: 0;
+
+    //     li:before {
+    //         display: none;
+    //     }
+    // }
+
+    button {
+        text-align: left;
+        color: $brand-grey;
+        font-size: $font-size-small;
+    }
+}
+
+.filterTitle {
+    font-size: $font-size-base;
+    color: $brand-grey-light;
+    margin-top: 0;
+    border-bottom: 1px solid $brand-grey-lighter;
+    padding-bottom: $spacer / 2;
+}

client/src/routes/Search/Sidebar.tsx

@@ -0,0 +1,65 @@
+import React, { PureComponent } from 'react'
+import Button from '../../components/atoms/Button'
+import Input from '../../components/atoms/Form/Input'
+import styles from './Sidebar.module.scss'
+import data from '../../data/form-publish.json'
+
+export default class Sidebar extends PureComponent<{
+    search: string
+    inputChange: any
+    category: string
+    license: string
+}> {
+    public render() {
+        const { search, inputChange, category, license } = this.props
+        const { steps }: any = data
+
+        return (
+            <aside className={styles.sidebar}>
+                <Input
+                    type="search"
+                    name="search"
+                    label="Search"
+                    placeholder="e.g. shapes of plants"
+                    value={search}
+                    onChange={inputChange}
+                    group={
+                        <Button primary onClick={search}>
+                            Search
+                        </Button>
+                    }
+                />
+
+                <div className={styles.filter}>
+                    <h3 className={styles.filterTitle}>Categories</h3>
+                    <ul>
+                        {steps[1].fields.categories.options.map(
+                            (category: string) => (
+                                <li key={category}>
+                                    <Button link onClick={() => null}>
+                                        {category}
+                                    </Button>
+                                </li>
+                            )
+                        )}
+                    </ul>
+                </div>
+
+                <div className={styles.filter}>
+                    <h3 className={styles.filterTitle}>License</h3>
+                    <ul className={styles.filter}>
+                        {steps[2].fields.license.options.map(
+                            (license: string) => (
+                                <li key={license}>
+                                    <Button link onClick={() => null}>
+                                        {license}
+                                    </Button>
+                                </li>
+                            )
+                        )}
+                    </ul>
+                </div>
+            </aside>
+        )
+    }
+}

client/src/routes/Search/index.module.scss

@@ -1,9 +1,19 @@
-@import '../styles/variables';
+@import '../../styles/variables';
+
+.content {
+    display: grid;
+    grid-gap: $spacer * 2;
+    grid-template-columns: 1fr;
+
+    @media (min-width: $break-point--medium) {
+        grid-template-columns: 1fr 3fr;
+    }
+}
 
 .resultsTitle {
     color: $brand-grey-light;
     font-size: $font-size-h3;
-    margin-top: -($spacer / 2);
+    margin-top: 0;
     margin-bottom: $spacer;
 
     span {
@@ -16,11 +26,11 @@
     grid-template-columns: 1fr;
     grid-gap: $spacer;
 
-    @media (min-width: $break-point--small) {
+    @media (min-width: $break-point--medium) {
         grid-template-columns: repeat(2, 1fr);
     }
 
-    @media (min-width: $break-point--medium) {
+    @media (min-width: $break-point--large) {
         grid-template-columns: repeat(3, 1fr);
     }
 }

client/src/routes/Search/index.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import Search from './Search'
-import { User } from '../context'
+import Search from '.'
+import { User } from '../../context'
 import { createMemoryHistory } from 'history'
 import { BrowserRouter as Router } from 'react-router-dom'
-import { userMockConnected } from '../../__mocks__/user-mock'
+import { userMockConnected } from '../../../__mocks__/user-mock'
 
 const history = createMemoryHistory()
 

client/src/routes/Search/index.tsx

@@ -1,19 +1,17 @@
 import React, { PureComponent, ChangeEvent } from 'react'
-import Button from '../components/atoms/Button'
-import Input from '../components/atoms/Form/Input'
 import { Link } from 'react-router-dom'
 import queryString from 'query-string'
 import { History, Location } from 'history'
 import { Logger } from '@oceanprotocol/squid'
-import Spinner from '../components/atoms/Spinner'
-import Route from '../components/templates/Route'
-import { User } from '../context'
-import AssetTeaser from '../components/molecules/AssetTeaser'
-import Pagination from '../components/molecules/Pagination'
-import styles from './Search.module.scss'
-import Content from '../components/atoms/Content'
-import withTracker from '../hoc/withTracker'
-import data from '../data/form-publish.json'
+import Spinner from '../../components/atoms/Spinner'
+import Route from '../../components/templates/Route'
+import { User } from '../../context'
+import AssetTeaser from '../../components/molecules/AssetTeaser'
+import Pagination from '../../components/molecules/Pagination'
+import styles from './index.module.scss'
+import Content from '../../components/atoms/Content'
+import withTracker from '../../hoc/withTracker'
+import Sidebar from './Sidebar'
 
 interface SearchProps {
     location: Location
@@ -186,59 +184,39 @@ class Search extends PureComponent<SearchProps, SearchState> {
 
     public render() {
         const { totalResults, totalPages, currentPage } = this.state
-        const { steps }: any = data
+
         return (
             <Route title="Search" wide>
                 <Content wide>
-                    <Input
-                        type="search"
-                        name="search"
-                        label="Search for data sets"
-                        placeholder="e.g. shapes of plants"
-                        value={this.state.search}
-                        onChange={this.inputChange}
-                        group={
-                            <Button primary onClick={this.search}>
-                                Search
-                            </Button>
-                        }
-                    />
-                    <Input
-                        type="select"
-                        name="category"
-                        label="Data sets from category"
-                        placeholder="e.g. Biology"
-                        options={steps[1].fields.categories.options}
-                        value={this.state.category}
-                        onChange={this.inputChange}
-                    />
-                    <Input
-                        type="select"
-                        name="license"
-                        label="Data sets from license"
-                        placeholder="e.g. Biology"
-                        options={steps[2].fields.license.options}
-                        value={this.state.license}
-                        onChange={this.inputChange}
-                    />
-                    {!this.state.isLoading && (
-                        <h2 className={styles.resultsTitle}>
-                            {totalResults} results for{' '}
-                            <span>
-                                {decodeURIComponent(
-                                    this.state.searchTerm ||
-                                        this.state.searchCategories
-                                )}
-                            </span>
-                        </h2>
-                    )}
-                    {this.renderResults()}
+                    <div className={styles.content}>
+                        <Sidebar
+                            search={this.state.search}
+                            inputChange={this.inputChange}
+                            category={this.state.category}
+                            license={this.state.license}
+                        />
 
-                    <Pagination
-                        totalPages={totalPages}
-                        currentPage={currentPage}
-                        handlePageClick={this.handlePageClick}
-                    />
+                        <div className={styles.contentResults}>
+                            {!this.state.isLoading && (
+                                <h2 className={styles.resultsTitle}>
+                                    {totalResults} results for{' '}
+                                    <span>
+                                        {decodeURIComponent(
+                                            this.state.searchTerm ||
+                                                this.state.searchCategories
+                                        )}
+                                    </span>
+                                </h2>
+                            )}
+                            {this.renderResults()}
+
+                            <Pagination
+                                totalPages={totalPages}
+                                currentPage={currentPage}
+                                handlePageClick={this.handlePageClick}
+                            />
+                        </div>
+                    </div>
                 </Content>
             </Route>
         )