FS-68 add config option and template logic to move sort-by into accordion

src/components/_fs-search-accordion.scss

@@ -0,0 +1,132 @@
+/**
+ * search-accordion.scss
+ * Define search accordion styles.
+ *
+ * @copyright Copyright (c) 2017-2020 Palantir.net
+ */
+
+.fs-search-accordion {
+  margin-bottom: rhythm(1);
+  color: $gray-dark;
+  padding: 0;
+}
+
+.fs-search-accordion__title {
+  @include adjust-font-size-to($sm-heading, 1);
+  display: block;
+  padding-right: 1.25rem;
+  padding-left: 1.25rem;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  }
+
+  // Display plus symbol at initial state
+  &:after {
+    content: "+";
+    float: right;
+  }
+}
+
+.fs-search-accordion__checkbox-input {
+  @extend %input;
+}
+
+.fs-search-accordion__checkbox-label {
+  cursor: pointer;
+  display: block;
+  padding: rhythm(.5) 0;
+
+  @include breakpoint($bp2) {
+    @include adjust-font-size-to($label, .8);
+    padding: rhythm(.35) 0;
+  }
+}
+
+.fs-search-accordion__content {
+  @extend %list;
+  margin: 0;
+  padding: rhythm(.5) 1.25rem;
+
+  @media only screen and (min-width: 1025px) {
+    // Center date-picker which we can't set to display:block.
+    #solr-list-facet-ds_federated_date & {
+      text-align: center;
+    }
+  }
+
+  @media only screen and (max-width: 425px) {
+    // Center date-picker which we can't set to display:block.
+    #solr-list-facet-ds_federated_date & {
+      text-align: center;
+    }
+  }
+
+  @media only screen and (max-width: 1350px) and (min-width: 768px)  {
+    #solr-list-facet-ds_federated_date & {
+      padding: rhythm(.5) .5rem;
+    }
+  }
+}
+
+.fs-search-accordion__group,
+.fs-search-accordion__subgroup {
+  list-style: none;
+  padding: 0;
+}
+
+.fs-search-accordion__group-item,
+.fs-search-accordion__content-item {
+  display: block;
+  margin: 0;
+  overflow: hidden;
+
+  // Date widget overflow fix.
+  &#solr-list-facet-ds_federated_date {
+    overflow: visible;
+
+    .fs-search-accordion__content-item {
+      overflow: visible;
+    }
+  }
+}
+
+.fs-search-accordion__group {
+  @extend %list;
+  margin: 0;
+}
+
+.fs-search-accordion__subgroup {
+  margin: 0 0 0 rhythm(.5);
+}
+
+.fs-search-accordion__title {
+  @extend %h2;
+  border-bottom: solid 1px $gray-light;
+  padding-top: rhythm(.75);
+  padding-bottom: rhythm(.75);
+
+  @include breakpoint($bp2) {
+    @include adjust-font-size-to($label, .8);
+    padding-top: rhythm(.3);
+    padding-bottom: rhythm(.3);
+  }
+
+  &:active,
+  &:hover,
+  &:focus {
+    border-bottom: solid 1px darken($gray-light, 10);
+    outline: 0;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  // Replace plus symbol with en dash when search-accordion is open
+  &.js-fs-search-accordion-open:after {
+    content: "–";
+  }
+}

src/components/federated-solr-faceted-search.js

@@ -106,7 +106,16 @@ class FederatedSolrFacetedSearch extends React.Component {
       gridTemplateColumns = '',
       reverseDesktopColumns = false,
       reverseMobileOrder = false,
+      sortFilterInAccordion = false,
     } = this.props.options.layoutAndClasses || {};
+    const sortFilterComponent = (
+      <SortComponent
+      bootstrapCss={bootstrapCss}
+      onChange={onSortFieldChange}
+      sortFields={sortFields}
+      sortFilterInAccordion={sortFilterInAccordion}
+      />
+    );
 
     return (
       <LiveAnnouncer>
@@ -140,8 +149,11 @@ class FederatedSolrFacetedSearch extends React.Component {
                       {...searchField}
                       bootstrapCss={bootstrapCss}
                       facets={facets}
+                      sortFields={sortFields}
                       truncateFacetListsAt={truncateFacetListsAt}
                       onChange={onSearchFieldChange}
+                      onSortFieldChange={onSortFieldChange}
+                      sortFilterInAccordion={sortFilterInAccordion}
                     />
                   );
                 })
@@ -164,11 +176,7 @@ class FederatedSolrFacetedSearch extends React.Component {
                 {...this.props}
                 onChange={onSearchFieldChange}
               />
-              <SortComponent
-                bootstrapCss={bootstrapCss}
-                onChange={onSortFieldChange}
-                sortFields={sortFields}
-              />
+              {sortFilterInAccordion ? '' : sortFilterComponent}
             </div>
             <p className={(searchFields.find(sf => sf.field === 'tm_rendered_item').value || this.props.options.showEmptySearchResults) ? 'solr-search-results-container__prompt fs-element-invisible' : 'solr-search-results-container__prompt'}>{this.props.options.searchPrompt || 'Please enter a search term.'}</p>
             <div className={(searchFields.find(sf => sf.field === 'tm_rendered_item').value || this.props.options.showEmptySearchResults) ? 'solr-search-results-container__wrapper' : 'solr-search-results-container__wrapper fs-element-invisible'}>

src/components/list-facet/index.js

@@ -12,7 +12,22 @@ class FederatedListFacet extends React.Component {
     this.state = {
       filter: '',
       truncateFacetListsAt: props.truncateFacetListsAt,
+      sort: 'score',
     };
+    this.onSelect = this.onSelect.bind(this);
+  }
+
+  onSelect(event) {
+    this.setState({sort: event.target.value});
+
+    const sortField = event.target.value;
+    const foundIdx = this.props.sortFields.indexOf(sortField);
+
+    if (foundIdx < 0) {
+      this.props.onSortFieldChange(sortField, "desc");
+    } else {
+      this.props.onSortFieldChange(sortField, null);
+    }
   }
 
   handleClick(value) {
@@ -99,9 +114,10 @@ class FederatedListFacet extends React.Component {
       collapse,
       hierarchy,
       options,
+      sortFields,
+      sortFilterInAccordion,
     } = this.props;
     const { truncateFacetListsAt } = this.state;
-
     const siteList = options.siteList;
     const facetCounts = facets.filter((facet, i) => i % 2 === 1);
     const facetValues = facets.filter((facet, i) => i % 2 === 0);
@@ -224,7 +240,37 @@ class FederatedListFacet extends React.Component {
               </ul>
             </AnimateHeight>
           </li>);
+
       });
+      listFacetHierarchyLis.push(
+        sortFilterInAccordion
+          ? (
+            <li className={'fs-search-accordion__group-item'} id={`solr-list-facet-Sort`} key={`solr-list-facet-Sort-1234`}>
+            <div
+                tabIndex="0"
+                className={cx("fs-search-accordion__title", {"js-fs-search-accordion-open": expanded})}
+                id={'sort-by'}
+                onClick={this.toggleExpand.bind(this)}
+                onKeyDown={(event)=>{if (event.keyCode === 13) {this.toggleExpand()}}}
+            >Sort</div>
+            <AnimateHeight
+                duration={600}
+                height={height}
+            >
+              <ul className={"fs-search-accordion__content"}>
+                  <li className={"fs-search-accordion__content-item" }>
+                    <select className="fs-search-scope__select" id="sort-by" name="sort-by" onChange={this.onSelect} value={this.state.sort}>
+                      {sortFields.map((sortField, i) => (
+                        <option value={sortField.field} key={i}>{sortField.label}</option>
+                      ))}
+                    </select>
+                  </li>
+              </ul>
+            </AnimateHeight>
+          </li>
+          )
+          : '',
+      );
       // Render the group of accordion lis with their facet value checkbox lists.
       return listFacetHierarchyLis;
     }
@@ -300,6 +346,8 @@ FederatedListFacet.propTypes = {
   onChange: PropTypes.func,
   onFacetSortChange: PropTypes.func,
   onSetCollapse: PropTypes.func,
+  sortFields: PropTypes.array,
+  sortFilterInAccordion: PropTypes.bool,
   query: PropTypes.object,
   truncateFacetListsAt: PropTypes.number,
   value: PropTypes.array,

src/components/search-field-container.js

@@ -3,7 +3,6 @@ import React from 'react';
 import cx from 'classnames';
 import AnimateHeight from 'react-animate-height';
 
-
 class FederatedSearchFieldContainer extends React.Component {
   constructor(props) {
     super(props);
@@ -41,7 +40,12 @@ class FederatedSearchFieldContainer extends React.Component {
   }
 
   render() {
-    const { onNewSearch } = this.props;
+    const { onNewSearch, sortFilterComponent } = this.props;
+    // Grab env vars.
+    const {
+      sortFilterInAccordion = false,
+    } = this.props.options.layoutAndClasses || {};
+
     const height = this.state.expanded ? 'auto' : 0;
 
     return (
@@ -64,7 +68,12 @@ class FederatedSearchFieldContainer extends React.Component {
                 <h2 className="fs-search-filters__title" id="fs-section-title">Filter Results</h2>
               </div>
               { this.props.resultsCount > 0
-                ? (<ul className="fs-search-accordion__group">{this.props.children}</ul>)
+                ? (
+                  <ul className="fs-search-accordion__group">
+                    {this.props.children}
+                    {sortFilterInAccordion ? sortFilterComponent : ''}
+                  </ul>
+                )
                 : <div className="fs-search-filters__no-results">There are no results to filter.</div> }
             </section>
 
@@ -78,10 +87,12 @@ class FederatedSearchFieldContainer extends React.Component {
   }
 }
 
+
 FederatedSearchFieldContainer.propTypes = {
   children: PropTypes.array,
   onNewSearch: PropTypes.func,
   options: PropTypes.object,
+  sortFilterComponent: PropTypes.object,
 };
 
 export default FederatedSearchFieldContainer;

src/components/sort-menu/index.js

@@ -2,50 +2,55 @@ import PropTypes from 'prop-types';
 import React from "react";
 
 class FederatedSortMenu extends React.Component {
-	constructor(props) {
-		super(props);
+  constructor(props) {
+    super(props);
 
-		this.state = {
-      sort: 'score'
-		};
+    this.state = {
+      sort: 'score',
+    };
     this.onSelect = this.onSelect.bind(this);
-	}
-
-	onSelect(event) {
-	  this.setState({sort: event.target.value});
-
-	  const sortField = event.target.value;
-		const foundIdx = this.props.sortFields.indexOf(sortField);
-		if (foundIdx < 0) {
-			this.props.onChange(sortField, "desc");
-		} else {
-			this.props.onChange(sortField, null);
-		}
-	}
-
-	render() {
-		const { sortFields } = this.props;
-		if (sortFields.length === 0) { return null; }
-
-		return (
-			<div className="fs-search-scope">
+    this.toggleExpand = this.toggleExpand.bind(this);
+  }
+  toggleExpand() {
+    this.props.onSetCollapse(this.props.field, !(this.props.collapse || false));
+  }
+
+  onSelect(event) {
+    this.setState({sort: event.target.value});
+
+    const sortField = event.target.value;
+    const foundIdx = this.props.sortFields.indexOf(sortField);
+
+    if (foundIdx < 0) {
+      this.props.onChange(sortField, "desc");
+    } else {
+      this.props.onChange(sortField, null);
+    }
+  }
+
+  render() {
+    const { sortFields } = this.props;
+    if (sortFields.length === 0) { return null; }
+
+    return (
+      <div className="fs-search-scope">
         <div className="fs-search-scope__filter">
           <label className="fs-search-scope__label" htmlFor="sort-by">Sort By</label>
           <select className="fs-search-scope__select" id="sort-by" name="sort-by" onChange={this.onSelect} value={this.state.sort}>
-						{sortFields.map((sortField, i) => (
-                <option value={sortField.field} key={i}>{sortField.label}</option>
-						))}
+            {sortFields.map((sortField, i) => (
+              <option value={sortField.field} key={i}>{sortField.label}</option>
+            ))}
           </select>
         </div>
-			</div>
-		);
-	}
+      </div>
+    );
+  }
 }
 
 FederatedSortMenu.propTypes = {
-	bootstrapCss: PropTypes.bool,
-	onChange: PropTypes.func,
-	sortFields: PropTypes.array
+  bootstrapCss: PropTypes.bool,
+  onChange: PropTypes.func,
+  sortFields: PropTypes.array,
 };
 
 export default FederatedSortMenu;