WIP Fs 68 option to move sort filter

src/.env.local.js.example

@@ -46,6 +46,20 @@ module.exports = {
   pageTitle: null,
   // OPTIONAL: The hostname to emulate when testing.
   hostname: "example.local",
+  layoutAndClasses : {
+    // OPTIONAL: Specify the column widths.
+    gridTemplateColumns: "33% 66%",
+    // OPTIONAL: Add custom classes.
+    containerClass: "custom-container",
+    asideClass: "custom-aside",
+    mainClass: "custom-main",
+    // OPTIONAl: Reverse desktop column order.
+    reverseDesktopColumns: false,
+    // OPTIONAL: Reverse mobile stack order.
+    reverseMobileOrder: false,
+    // Breakpoint for Desktop. Layout will change when wider then the value specifed.
+    breakpointDesktop: 900,
+  },
   // OPTIONAL: Machine name of those search fields whose facets/filter and current values should be hidden in UI.
   // Note: if their values are pre-set (i.e. sent in qs to app), they will still be sent in the query.
   // hiddenSearchFields: [ // Defaults to [];

src/components/_fs-aside.scss

@@ -8,12 +8,15 @@
 .fs-aside {
   margin-left: 0;
   margin-bottom: rhythm(1);
-  background-color: $c-bg-gray;
+}
+
+.fs-aside__mobile-reverse {
+  order: 2;
+}
 
+// Layout option to move aside to right on desktop
+.fs-aside__desktop-reverse {
   @include breakpoint($bp2) {
-    float: left;
-    clear: both;
-    width: 22.85714%;
-    padding-top: rhythm(1);
+    order: 6; // Should be higher than all mobile orders.
   }
 }

src/components/_fs-container.scss

@@ -0,0 +1,26 @@
+/**
+ * container.scss
+ * Define container styles.
+ *
+ * @copyright Copyright (c) 2017-2020 Palantir.net
+ */
+
+.fs-container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 260px;
+  padding: 0 1.46667em;
+  margin: 0 auto;
+  @include breakpoint($bp2) {
+    display: grid;
+    grid-column-gap: 0;
+    grid-template-columns: 22.85714% 74.28571%;
+    width: 90%;
+    padding: 0;
+  }
+  @include breakpoint($bp2) {
+    max-width: 1400px;
+  }
+}

src/components/_fs-main.scss

@@ -9,11 +9,19 @@
   margin-left: 0;
   margin-right: 0;
   margin-bottom: rhythm(1);
+  @include breakpoint($bp2) {
+    padding-left: 3.703713%; //Default to match previous version 1.x padding.
+  }
+  &.fs-main__has-custom-columns {
+    @include breakpoint($bp2) {
+      padding-left: 2em;
+    }
+  }
+}
 
+.fs-main__desktop-reverse {
   @include breakpoint($bp2) {
-    float: right;
-    clear: none;
-    width: 74.28571%;
-    padding-top: rhythm(1);
+    padding-left: 0;
+    padding-right: 2em;
   }
 }

src/components/_fs-search-filters.scss

@@ -5,6 +5,13 @@
  * @copyright Copyright (c) 2017-2019 Palantir.net
  */
 
+.fs-search-filters {
+  background-color: $c-bg-gray;
+  @include breakpoint($bp2) {
+    padding-top: rhythm(1);
+  }
+}
+
 .fs-search-filters__trigger,
 .fs-search-accordion__title {
   @include adjust-font-size-to($sm-heading, 1);
@@ -208,6 +215,7 @@
 }
 
 .fs-search-accordion__title {
+  margin: 0;
   @extend %h2;
   border-bottom: solid 1px $gray-light;
   padding-top: rhythm(.75);

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

@@ -98,14 +98,35 @@ class FederatedSolrFacetedSearch extends React.Component {
       pageTitle = <h1>{this.props.options.pageTitle}</h1>;
     }
 
+    // Grab env vars.
+    const {
+      containerClass = '',
+      asideClass = '',
+      mainClass = '',
+      gridTemplateColumns = '',
+      reverseDesktopColumns = false,
+      reverseMobileOrder = false,
+      sortFilterInAccordion = false,
+    } = this.props.options.layoutAndClasses || {};
+    const sortFilterComponent = (
+      <SortComponent
+      bootstrapCss={bootstrapCss}
+      onChange={onSortFieldChange}
+      sortFields={sortFields}
+      sortFilterInAccordion={sortFilterInAccordion}
+      />
+    );
+
     return (
       <LiveAnnouncer>
-        <div className="fs-container">
-          <aside className="fs-aside">
+        <div className={`fs-container ${containerClass}`} style={{ gridTemplateColumns: gridTemplateColumns }}>
+          <aside className={`fs-aside ${asideClass} ${reverseDesktopColumns ? 'fs-aside__desktop-reverse' : ''} ${reverseMobileOrder ? 'fs-aside__mobile-reverse' : ''}`}>
             <SearchFieldContainerComponent
               bootstrapCss={bootstrapCss}
               onNewSearch={this.resetFilters}
               resultsCount={this.props.results.numFound}
+              options={this.props.options}
+              sortFilterComponent={sortFilterComponent}
             >
               {/* Only render the visible facets / filters.
                   Note: their values may still be used in the query, if they were pre-set. */}
@@ -137,7 +158,7 @@ class FederatedSolrFacetedSearch extends React.Component {
               }
             </SearchFieldContainerComponent>
           </aside>
-          <div className="fs-main">
+          <div className={`fs-main ${mainClass} ${reverseDesktopColumns ? 'fs-main__desktop-reverse' : ''} ${reverseMobileOrder ? 'fs-main__mobile-reverse' : ''} ${gridTemplateColumns ? 'fs-main__has-custom-columns' : ''}`}>
             {pageTitle}
             <div className="fs-search-form" autoComplete="on">
               <FederatedTextSearch
@@ -153,11 +174,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/search-field-container.js

@@ -3,17 +3,19 @@ import React from 'react';
 import cx from 'classnames';
 import AnimateHeight from 'react-animate-height';
 
-
 class FederatedSearchFieldContainer extends React.Component {
   constructor(props) {
     super(props);
 
     // This will return the width of the viewport.
     let intFrameWidth = window.innerWidth;
 
+    // Get our breakpoint option from env.
+    const { breakpointDesktop = '900' } = this.props.options.layoutAndClasses || {};
+
     this.state = {
       // Filters are visible for large / hidden for small screens by default.
-      expanded: intFrameWidth > 900,
+      expanded: intFrameWidth > breakpointDesktop,
     };
 
     this.handleClick = this.handleClick.bind(this);
@@ -22,7 +24,7 @@ class FederatedSearchFieldContainer extends React.Component {
       // Desktop height.
       let height = 'auto';
       // In mobile view, when resized, lets close things.
-      if (window.innerWidth < 900) {
+      if (window.innerWidth < breakpointDesktop) {
         height = 0;
       }
       this.setState({
@@ -38,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 (
@@ -61,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>
 
@@ -75,9 +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/_fs-search-scope.scss

@@ -10,6 +10,70 @@
   margin: rhythm(1) 0;
 }
 
+.fs-search-scope__filter {
+  width: 48.57143%;
+  clear: right;
+  float: left;
+  margin-left: 0;
+  margin-right: 2.85714%;
+
+  @include breakpoint($bp1) {
+    width: 31.42857%;
+    clear: right;
+    float: left;
+    margin-left: 0;
+    margin-right: 2.85714%;
+  }
+
+  &:nth-of-type(3n+1) {
+    width: 48.57143%;
+    clear: right;
+    float: left;
+    margin-left: 0;
+    margin-right: 2.85714%;
+    clear: both;
+
+    @include breakpoint($bp1) {
+      width: 31.42857%;
+      float: left;
+      margin-right: -100%;
+      margin-left: 0;
+      clear: both;
+    }
+  }
+
+  &:nth-of-type(3n+2) {
+    width: 48.57143%;
+    clear: right;
+    float: right;
+    margin-right: 0;
+
+    @include breakpoint($bp1) {
+      width: 31.42857%;
+      float: left;
+      margin-right: -100%;
+      margin-left: 34.28571%;
+      clear: none;
+    }
+  }
+
+  &:nth-of-type(3n+3) {
+    width: 48.57143%;
+    clear: right;
+    float: left;
+    margin-left: 0;
+    margin-right: 2.85714%;
+    clear: both;
+
+    @include breakpoint($bp1) {
+      width: 31.42857%;
+      float: right;
+      margin-left: 0;
+      margin-right: 0;
+      clear: none;
+    }
+  }
+}
 .fs-search-scope__select {
   @extend %select;
   @include adjust-font-size-to($label, .8);